实战

实战 - 图1

你可以配合 createjs 的 tweenjs ，轻松制作出上面的摇摆特效:

  1. var element = document.querySelector("#test")
  2. Transform(element)
  3. element.originY = 100
  4. element.skewX = -20
  6. var Tween = createjs.Tween,
  7.     sineInOutEase = createjs.Ease.sineInOut
  8. Tween.get(element, {loop: true}).to({scaleY: .8}, 450, sineInOutEase).to({scaleY: 1}, 450, sineInOutEase)
  9. Tween.get(element, {loop: true}).to({skewX: 20}, 900, sineInOutEase).to({skewX: -20}, 900, sineInOutEase)

上面的代码很精简。这里稍微解释下：

  • 元素的初始skewX是-20，为了和scale的步调一致
  • 元素的originY是100，为的以企鹅的bottom center为基准点

可以看到，由于css3transform高度抽象，可以和tweenjs轻松搭配使用，没有任何压力。