您的位置:首页 > 其它

(生产)create-keyframe-animation -动画实现

2017-06-16 11:54 246 查看
参考: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 回调

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: