jkf's Introduction

Jkf

A javascript animation library that use css-keyframes-animation syntax. examples

Keyframes

这是在 Jkf 里使用的 keyframes:

{
    0: { left: 0, borderRadius: 0 },
    0.5: { left: '30px' },
    1: { left: '100px', borderRadius: '50%' }
}

它是一个长得很像 css-keyframes 的 javascript object。值得注意的是:

描述时间点的 key 是小数而不是百分数
属性名是驼峰式的
属性值为 0 时可以不加单位（百分号在这里被当作单位）

Combinations

transform: translateX(0) rotateZ(10deg) scale(1.2)

transform 可以被当作由 translateX, rotateZ, scale 三个子属性组成。我们把像这样能拆分成多个子属性的属性叫做 combination。

combination 的子属性未必是要“真实”存在的。

background-color: rgb(0, 0, 0)

这里可以认为 background-color 是由 r, g, b 三个子属性组成。

Jkf 提供了 Jkf.registerCombination 方法，允许你自定义 combination。

因为 transform 被广泛应用，Jkf 预先把它注册成了 combination。你可以像这样在 keyframes 里使用 transform 了:

{
  0: { translateX: 0, rotateZ: 0, borderRadius: 0, opacity: 1 },
  0.5: { borderRadius: '50%', opacity: 0.5 },
  1: { translateX: '100%', rotateZ: '360deg', borderRadius: 0, opacity: 1 }
};

Jkf 内部是如何注册 transform 的如何把 background-color 注册成 combination

Usage

Jkf.update(elem, keyframes, progress)

给定 progress，把元素 style 成 keyframes 里相对应的状态。example

elem ( type: dom ): 要操作的元素
keyframes ( type: object ): Jkf 使用的 keyframes rule
progress ( type: number ): 一个 0 ~ 1 之间的小数

Jkf.animate(elem, keyframes, duration [, options]) => controller

进行一段基于 keyframes 的动画。通过函数返回的 controller，可以对已经开始的动画进行控制。

elem ( type: dom ): 要操作的元素
keyframes ( type: object ): Jkf 使用的 keyframes rule
duration ( type: number ): 动画时间，以 ms 为单位
options ( type: object ) : 一个 javascript 对象，其中的所有项都是可选的
from ( type: number, default: 0 ): 设定动画的起始点
to ( type: number, default: 1 ): 设定动画的结束点。to 不需要大于 from，{ from: 1, to: 0 } 是允许的。example
timingFunction ( type: array | string, default: 'ease' ): 支持数组形式的 cubic-bezier values，支持 linear，ease，ease-in，ease-out，ease-in-out 五种关键字
onUpdate ( type: function, params: [elem, progress] ): 动画每一次 update 时执行的 callback。elem 和当前的 progress 被传入函数。
onEnd ( type: function, params: [elem] ): 动画结束后执行的 callback。elem 被传入函数。
controller ( type: object ): 可以对已经开始的动画进行控制。example
controller.pause(): 暂停
controller.resume(): 继续
controller.toggler(): 切换暂停或者继续

Jkf.queuedAnimate(elem, ...animationConfigs, callback)

Jkf.queuedAnimate(elem, [
  [kf1, duration1, options1, delay1],
  [kf2, duration2, options2, delay2],
  [kf3, duration3, options3, delay3],
  ...
], callback);

Delay is optional. Callback is called when last animation ended;

jkf's People

Contributors

Stargazers

Watchers

jkf's Issues

Add timeline method

Would nice to be able to define all animations in one object. Where the parent selector is the context for each children. A second parameter could hold a selector-engine like jQuery.

Jkf.timeline(animations [, engine])

Jkf.timeline({
  '.section-1': {
    '.section-title': {
      0: { opacity: 1 },
      0.5: { opacity: 0 },
      1: { opacity: 1 }
    },
    '.section-body': {
      0: { scale: 0 },
      1: { scale: 1 }
    }
  },
  '.section-2': {
    '.section-title': {
      ...
    }
  }
}, window.jQuery)

It's maybe better to use arrays instead of plain objects, for performance reasons (and the case that objects are sorted differently by browsers).

Jkf.timeline([{
  element: '.section-1',
  animations: [{
    element: '.section-title',
    keyframes: {
      0: { opacity: 1 },
      0.5: { opacity: 0 },
      1: { opacity: 1 }
    }
  }, {
    element: '.section-body',
    keyframes: {
      ...
    }
  }]
}, {
  element: '.section-2',
  animations: [{
    element: '.section-title',
    keyframes: {
      ...
    }
  }]
}], window.jQuery)

...or maybe functional like the example below?

Jkf.timeline([
  Jkf.section('.section-1', [
    Jkf.animate('.section-title', {
      0: { opacity: 1 },
      0.5: { opacity: 0 },
      1: { opacity: 1 }
    }),
    Jkf.animate('.section-body', {
      ...
    })
  ]),
  Jkf.section('.section-2', [
    Jkf.animate('.section-title', {
      ...
    })
  ])
], window.jQuery)