寫在前面
記得以前facebook做過一款HTML5游戲。開場動畫是一塊軟體類似豆腐的東西一起搖擺。類似的效果如下面的gif所示:
facebook當時使用的是createjs下的子項目easeljs和tweenjs去制作,基于Canvas的動畫?;镜脑碇饕牵貉h(huán)運動Canvas抽象的DisplayObject的skewX和scaleY來實現(xiàn)軟體搖擺。
目前來看transformjs也能做到,因為transformjs也能運動skewX和scaleY。先來看看facebook的方式。
tweenjs + transformjs
注意這里的tweenjs是createjs下的子項目,而不是github上的tween.js項目。
var element = document.querySelector("#test"); Transform(element); element.originY = 100; element.skewX = -20; var Tween = createjs.Tween, sineInOutEase =<