magi.js

Magi.js

Magi.js 一款轻量级的适用于微信小程序的 JavaScript 动画引擎。使用“黑科技”来突破微信小程序 wx.createAnimation 实现上局限性，然你像使用 css transition 那样自由使用 JavaScript 动画。

特点

• 轻量级，4kb 的大小完全不用担心它对你的项目造成负担
• 更友好的 API，接近于传统动画引擎的 API 形态，便于容易理解与快速开发
• 更强大的内置支持，支持所有可用于动画变换的 CSS 属性，并内置大量的缓动函数
• 支持链式调用，通过链式调用，你可以很方便的生成指定的动画序列
• 支持任何有效的属性单位，例如 rpx、rem

用法

$ npm install magi.js

或

$ yarn add magi.js

或者手动 下载 ，然后将 magi.js 复制到你的项目目录下。

var magi = require('magi.js')

或

import magi from 'magi.js'

你可以像这样编写你的动画函数：

magi({
  duration: 1000,
  easing: 'ease',
  scale: [2, 2],
  rotate: '0.125turn'
}).then({
  duration: 600,
  width: '400rpx',
  translate: [-100, -100],
  easing: 'easeOutCirc'
})

注意：magi.js 与微信小程序中的 wx.createAnimation 类似，最后需要通过动画实例的 end 方法导出动画数据并传递给组件的 animation 属性。

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

var anima = magi({
  duration: 1000,
  easing: 'ease',
  scale: [2, 2],
  rotate: '0.125turn'
})

this.setData({
  animationData: anima.end()
})

API

动画属性

类型	示例
CSS	width, opacity, backgroundColor ...
Transforms	translateX, rotate, scale ...

CSS

任何可以用于动画的 CSS 属性：

magi({
  left: '80%', // 像左移动到 80% 的位置
  opacity: 0.8, // 将 opacity 的值动画变换为 0.8
  backgroundColor: '#FFF' // 将背景色动画变换为 #FFF
})

CSS transform 属性

有效的 CSS transform 属性：

magi({
  translateX: 250, // 将 translateX 属性动画变换为 250px
  scale: 2, // 将 scale 属性动画变换为 2
  rotate: '1turn' // 将 rotation 属性动画变换为 1 turn
})

动画序列

使用 then 函数连接每一步动画：

magi({
  duration: 800,
  easing: 'ease'
}).then({
  duration: 600,
  width: '300rpx',
  translate: [-200, -100],
}).then({
  rotate: '45dge',
  easing: 'easeOutCirc'
})

缓动函数

easing 参数既可以接受字符串也可以接受自定义的 Bézier 曲线坐标（数组）

类型	示例	说明
String	'easeOutExpo'	内置的函数名称
Array	[0.81, -0.41, 0.33, 1.26]	自定义的 Bézier 曲线坐标（[x1, y1, x2, y2]）

内置的函数

In	Out	InOut
easeIn	easeOut	easeInOut
easeInQuad	easeOutQuad	easeInOutQuad
easeInCubic	easeOutCubic	easeInOutCubic
easeInQuart	easeOutQuart	easeInOutQuart
easeInQuint	easeOutQuint	easeInOutQuint
easeInSine	easeOutSine	easeInOutSine
easeInExpo	easeOutExpo	easeInOutExpo
easeInCirc	easeOutCirc	easeInOutCirc
easeInBack	easeOutBack	easeInOutBack
easeInElastic	easeOutElastic	easeInOutElastic

用法：

magi({
  translateX: 100,
  easing: 'easeOutExpo'
});

自定义的 Bézier 曲线

使用一个包含 4 个坐标的 Array 来定义 Bézier 曲线：

magi({
  translateX: 100,
  easing: [0.81, -0.41, 0.33, 1.26]
});

自定义 Bézier 曲线坐标生成器 https://matthewlein.com/ceaser/

====

MIT License. © 2018 Amery2010.

magi.js 的 API 以及文档借鉴了 Anime , 缓动函数源于 BezierEasing