(生產)create-keyframe-animation -動畫實現
阿新 • • 發佈:2017-06-16
pro ase 回調 dir select ots ack nor github
參考:https://github.com/HenrikJoreteg/create-keyframe-animation
實例
var animations = require(‘create-keyframe-animation‘)
新建動畫:animations.registerAnimation({
name: ‘move‘,//動畫名稱
animation: [ //實現的動畫效果
0: {transform: `translate3d(${x}px,${y}px,0) scale(${scale})` },
60: {transform: `translate3d(0,0,0) scale(1.1)` },
100: {transform: `translate3d(0,0,0) scale(1)` }
],
presets: {
duration: 1000, // 持續時間
fillMode: ‘both‘, // css3 animation 的 fill-mode 屬性
easing: ‘ease‘, // 動畫的效果 default easing
iterations: 1, // 實現動畫的次數
delay: 0, // 延遲
direction: ‘normal‘, // 方向
resetWhenDone: false, // if true :將最後動畫狀態應用為“變換”屬性
clearTransformsBeforeStart: false // 是否在動畫開始之前清除現有的轉換
}
})使用:
animations.runAnimation(document.querySelectorAll(‘.dots‘), ‘move‘,function(){})
.runAnimation(element(s), name string or options object, [callback])
返回一個 promise
參數element : 可以是一個單一的元素,元素或querySelectorAll結果數組
- 參數name:
如果是字符串,那麽就是registerAnimation定義的動畫名稱
如果傳遞對象,它必須包含名稱,例子:
animations.runAnimation(document.querySelectorAll(‘.dots‘), {
name: ‘wiggle‘,
delay: 1500 // 在這裏,我們可以重寫如上所述的任何預置選項
}, function () {}
callback 回調
(生產)create-keyframe-animation -動畫實現