animation

Installation

$ npm install @uni/animation --save

createAnimation

Create an animation instance Animation.

You can use the chain call instance method to describe the animation, and finally export the animation data by the export method, and then bind the animation data to the component or HTML node.

Supports

Usage

import { createAnimation } from '@uni/animation';

const animation = createAnimation();

animation
  .rotate(30)
  .translate(100, 50)
  .step();

// In the mini program, you need to pass `data` to the `animation` property of the component
const data = animation.export();

// If you need to support web-side scenarios, the `export` method needs to pass in additional binding HTML node
// const data = animation.export(document.getElementById('app'));

createTransition

Create a transition animation.

Create the transition animation through the configuration option, and finally export the animation data through the export method, and then bind the animation data to the component or HTML node (the same way as createAnimation).

Supports

Usage

import { createTransition } from '@uni/animation';

const transition = createTransition({
  from: {
    opacity: 0.6,
    transform: 'translate(10px, 10px) scale(1)'
  },
  to: {
    opacity: 1,
    transform: 'translate(100px, 50px) scale(1.2)'
  },
  options: {
    duration: 350
  }
});

// In the mini-program, you need to pass `data` to the `animation` property of the component
const data = transition.export();

// If you need to support web-side scenarios, the `export` method needs to pass in additional binding HTML node
// const data = animation.export(document.getElementById('app'));