前端动画化探索-mojs
慎峻
资料
GSAP（GreenSock）：最健全的web动画库之一 - 知乎入门优雅的Mo.js（图形动画Javascript库） - 知乎
目录
使用动画库的场景和痛点
使用场景
-
简单动画直接手写、比如按钮呼吸动效、手势引导等动效、或者使用animate.css来配合实现
-
复杂动画，没有可变的值的时候，可以使用svga播放器进行动效播放控制、svag.lite(svga.lite - npm)(130k)
-
当动画中有可变的值，如动效中的数值不确定，动效不是静态的内容、需要外部传值，就需要手写动画。
痛点
-
一个对象多动画、和多对象动画依次执行的时候，使用传统实现，需要加很多逻辑处理、动画库一般提供时间线来控制，并实现事件回调。
-
不同时间动画的重叠和过渡处理会出现很多问题
-
需要处理屏幕密度和不同设备直接样式动画不一致的问题
-
动画需要依赖设计给到svga文件或者spi文件，否则无法完成动画、
css动画
在线生成css3动画Animista - CSS Animations on Demand
animate.css
在线地址Animate.css | A cross-browser library of CSS animations.
现存动画库解决方案
gsap =>3.25M
功能类似three.js 功能强大、但是库过大、放弃
@moJs =>130k
-
作用于同一对象、叠加多种动画、且过度效果流畅。
-
动画类型为图形、图形旋转、图形炸裂。
-
允许自定义图形、自定义路径、自定义变换属性。
-
时间线和tween对多动画进行处理、
-
手写复杂动画、很多动画叠加在一起、过渡衔接细节处理
-
有gui编辑工具、
@moJs使用
项目官网(mo.js)
Mo.js
Mo.js是一个"简洁、高效"图形动画库，拥有流畅的动画和惊人的用户体验，在任何设备上，屏幕密度独立的效果都很好，你可以绘制内置的形状或者自定义形状，随便，只要你喜欢，你还可以绘制多个动画，再让它们串联在一起，逼话不多说详细的请浏览 Mo.js官方网站
对html元素加动画
大部分是css属性
const html = new mojs.Html({
// HTMLElement to animate. {String, Object} [selector, HTMLElement]
el: null,
// ∆ :: translateX property. {String, Number, Object} [value, delta]
x: 0,
// ∆ :: translateY property. {String, Number, Object} [value, delta]
y: 0,
// ∆ :: translateZ property. {String, Number, Object} [value, delta]
z: 0,
// ∆ :: skewX property. {String, Number, Object} [value, delta]
skewX: 0,
// ∆ :: skewY property. {String, Number, Object} [value, delta]
skewY: 0,
// ∆ :: rotateX property. {String, Number, Object} [value, delta]
rotateX: 0,
// ∆ :: rotateY property. {String, Number, Object} [value, delta]
rotateY: 0,
// ∆ :: rotateZ property. {String, Number, Object} [value, delta]
rotateZ: 0,
// ∆ :: scale property. {String, Number, Object} [value, delta]
scale: 1,
// ∆ :: scaleX property. {String, Number, Object} [value, delta]
scaleX: 1,
// ∆ :: scaleY property. {String, Number, Object} [value, delta]
scaleY: 1,
// ∆ :: opacity property. {String, Number, Object} [value, delta]
opacity: 1,
/*
For other CSS properties please see `Other CSS properties` section.
*/
// Custom properties to alter mojs behaviour (see `Teach mojs with customProperties` section). {Object}
customProperties: null,
// If should be shown before animation starts. {Boolean}
isShowStart: true,
// If should stay shown after animation ends. {Boolean}
isShowEnd: true,
// If should trigger composite layer for the module. {Boolean}
isForce3d: false,
// If should hide module with `transforms` instead of `display`. {Boolean}
isSoftHide: true,
// If refresh state on subsequent plays. {Boolean}
isRefreshState: true,
// Context callbacks will be called with. {Object}
callbacksContext: this
/* TWEEN PROPERTIES */
// Duration {Number}
duration: 350,
// Delay {Number}
delay: 0,
// If should repeat after animation finished {Number} *(1)
repeat: 0,
// Speed of the tween {Number}[0..∞]
speed: 1,
// If the progress should be flipped on repeat animation end {Boolean}
isYoyo: false,
// Easing function {String, Function}[ easing name, path coordinates, bezier string, easing function ]
easing: 'sin.out',
// Easing function for backward direction of the tween animation (fallbacks to `easing`) {String, Function}[ easing name, path coordinates, bezier string, easing function ]
backwardEasing: null,
// properties fro entire timeline
timeline: {
/* (+) TIMELINE PROPERTIES AND CALLBACKS - see Tween API */
},
/* TWEEN CALLBACKS */
/*
Fires on every update of the tween in any period (including delay periods). You probably want to use `onUpdate` method instead.
@param p {Number} Normal (not eased) progress.
@param isForward {Boolean} Direction of the progress.
@param isYoyo {Boolean} If in `yoyo` period.
*/
onProgress (p, isForward, isYoyo) {},
/*
Fires when tween's the entire progress reaches `0` point(doesn't fire in repeat periods).
@param isForward {Boolean} If progress moves in forward direction.
@param isYoyo {Boolean} If progress inside `yoyo` flip period.
*/
onStart (isForward, isYoyo) {},
/*
Fires when tween's the progress reaches `0` point in normal or repeat period.
@param isForward {Boolean} If progress moves in forward direction.
@param isYoyo {Boolean} If progress inside `yoyo` flip period.
*/
onFirstUpdate (isForward, isYoyo) {},
/*
Fires on first update of the tween in sufficiently active period (excluding delay periods).
@param ep {Number} Eased progress.
@param p {Number} Normal (not eased) progress.
@param isForward {Boolean} Direction of the progress.
@param isYoyo {Boolean} If in `yoyo` period.
*/
onUpdate (ep, p, isForward, isYoyo) {},
/*
Fires when tween's the progress reaches `1` point in normal or repeat period.
@param isForward {Boolean} If progress moves in forward direction.
@param isYoyo {Boolean} If progress inside `yoyo` flip period.
*/
onRepeatComplete (isForward, isYoyo) {},
/*
Fires when tween's the entire progress reaches `1` point(doesn't fire in repeat periods).
@param isForward {Boolean} If progress moves in forward direction.
@param isYoyo {Boolean} If progress inside `yoyo` flip period.
*/
onComplete (isForward, isYoyo) {},
/* Fires when the `.play` method called and tween isn't in play state yet. */
onPlaybackStart () {},
/* Fires when the `.pause` method called and tween isn't in pause state yet. */
onPlaybackPause () {},
/* Fires when the `.stop` method called and tween isn't in stop state yet. */
onPlaybackStop () {},
/* Fires when the tween end's animation (regardless progress) */
onPlaybackComplete () {},
})
/*
Creates next state transition chain.
@param options {Object} Next shape state.
*/
.then({ /* next state options */ })
/*
Starts playback.
@param shift {Number} Start progress shift in milliseconds.
*/
.play( shift = 0 )
/*
Starts playback in backward direction.
@param shift {Number} Start progress shift in milliseconds.
*/
.playBackward( shift = 0 )
/*
Resumes playback in direction it was prior to `pause`.
@param shift {Number} Start progress shift in milliseconds.
*/
.resume( shift = 0 )
/*
Pauses playback.
*/
.pause()
/*
Stops playback.
@param {Number} Progress to set after the stop [0...1].
*/
.stop( progress = 0 )
/*
Restarts playback.
@param shift {Number} Start progress shift in milliseconds.
*/
.replay( shift = 0 )
/*
Restarts playback in backward direction.
@param shift {Number} Start progress shift in milliseconds.
*/
.replayBackward( shift = 0 )
/*
Sets progress of the tween.
@param progress {Number} Progress to set [ 0..1 ].
*/
.setProgress( progress )
/*
Sets speed of the tween.
@param speed {Number} Progress to set [ 0..∞ ].
*/
.setSpeed ( speed )
/* Stops and resets the tween. */
.reset ( speed )const html = new mojs.Html({
el: "#js-el",
borderColor: { cyan: "#FA3204" },
borderWidth: { 2: 12 },
});打包的负担
直接react进行引入
npm i @mojs/coreconst MojsExample = () => {
const bouncyCircle = useRef();
useEffect(() => {
bouncyCircle.current = new mojs.Shape({
shape: "circle",
fill: { "#FC46AD": "#F64040" },
radius: { 50: 200 },
duration: 1000,
isShowStart: true,
easing: "elastic.inout",
});
});
return;
};@mojs/core包的大小只有150k影响很小，核心是使用svg，对现有项目影响小。
gui工具包
GUI player: 可视化控制动画的库
npm i @mojs/player
import MojsPlayer from '@mojs/player';
const mojsPlayer = new MojsPlayer({ add: mainTimeline });Mojs Curve Editor: 可视化缓动路径编辑器
npm i @mojs/curve-editor
import MojsCurveEditor from '@mojs/curve-editor';
const mojsCurve = new MojsCurveEditor();
const tween = new mojs.Tween({
easing: mojsCurve.getEasing()
});Timeline Editor:可视化时间线编辑器
npm i @mojs/timeline-editor
import MojsTimelineEditor from '@mojs/timeline-editor';
const mojsTimelineEditor = new MojsTimelineEditor();
类似资料：