摘要:寫在前面記得以前做過一款游戲。開場動畫是一塊軟體類似豆腐的東西一起搖擺。基本的原理主要是循環運動抽象的的和來實現軟體搖擺。目前來看也能做到,因為也能運動和。可以和任意時間運動庫配合使用。
寫在前面
記得以前facebook做過一款HTML5游戲。開場動畫是一塊軟體類似豆腐的東西一起搖擺。類似的效果如下面的gif所示:
facebook當時使用的是createjs下的子項目easeljs和tweenjs去制作,基于Canvas的動畫。基本的原理主要是:循環運動Canvas抽象的DisplayObject的skewX和scaleY來實現軟體搖擺。
目前來看transformjs也能做到,因為transformjs也能運動skewX和scaleY。先來看看facebook的方式。
注意這里的tweenjs是createjs下的子項目,而不是github上的tween.js項目。
var element = document.querySelector("#test"); Transform(element); element.originY = 100; element.skewX = -20; var Tween = createjs.Tween, sineInOutEase = createjs.Ease.sineInOut; Tween.get(element, {loop: true}).to({scaleY: .8}, 450, sineInOutEase).to({scaleY: 1}, 450, sineInOutEase); Tween.get(element, {loop: true}).to({skewX: 20}, 900, sineInOutEase).to({skewX: -20}, 900, sineInOutEase);
在線演示地址: http://alloyteam.github.io/AlloyTouch/transformjs/example/soft2.html
上面的代碼很精簡。這里稍微解釋下:
元素的初始skewX是-20,為了和scale的步調一致
元素的originY是100,為的以企鵝的bottom center為基準點
可以看到,由于transformjs高度抽象,可以和tweenjs輕松搭配使用,沒有任何壓力。
AlloyFlow + transformjs可能上面的代碼不是很明白具體實現的流程?說實話,第一次看到上面的代碼也沒有一下看清晰流程。那么就使用AlloyFlow分解工作流的方式去實現同樣的效果。
var element = document.querySelector("#test"); Transform(element); element.originY = 100; element.skewX = -20; function sineInOut(a) { return 0.5 * (1 - Math.cos(Math.PI * a)); } var alloyFlow = new AlloyFlow({ workflow: [ { work: function () { To.go(element, "scaleY", .8, 450, sineInOut); To.go(element, "skewX", 20, 900, sineInOut) }, start: 0 }, { work: function () { To.go(element, "scaleY", 1, 450, sineInOut) }, start: 450 }, { work: function () { To.go(element, "scaleY", .8, 450, sineInOut); To.go(element, "skewX", -20, 900, sineInOut) }, start: 900 }, { work: function () { To.go(element, "scaleY", 1, 450, sineInOut); }, start: 1350 }, { work: function () { this.start(); }, start: 1800 } ] }).start();
在線演示地址: http://alloyteam.github.io/AlloyTouch/transformjs/example/soft.html
可以看到上面的workflow里面有一堆work按照start的時間依次序執行,最后在1800ms的時候調用this.start()會回到起點重新開始運行。還需要解釋一下為什么選擇sineInOut的easing。可以來看看其緩動圖像:
sineInOut速率是先慢后快再慢,剛好符合軟體自身約束作用力的模擬。
那么,AlloyFlow是何方神器?且聽下回多帶帶開篇分解。
有很多童鞋問,transformjs還能做什么酷炫特效?怎么在官網看到的都是簡單的效果?
其實transformjs他只是提供了基礎的transformation能力,不與時間、和運動庫耦合。可以和任意時間運動庫配合使用。所以怎么酷炫完全靠大家創意和想象力,搭配transformjs使用就對了。
transformjs會計算出matrix3d賦給dom的 transform msTransform OTransform MozTransform webkitTransform,保證硬件加速和兼容性的同時,不丟失可編程性,點個贊....
主頁:http://alloyteam.github.io/AlloyTouch/transformjs/
Github :https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91140.html
摘要:更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫,開發者只需要關心添加或者移除相關的動畫的便可以。 簡介 在過去的兩年,越來越多的同事、朋友和其他不認識的童鞋進行移動web開發的時候,都使用了transformjs,所有必要介紹一下,讓更多的人受益,提高編程效率,并享受編程樂趣。(當然transformjs不僅僅支持移動設備,支持CSS3 3D Transforms的...
摘要:更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫,開發者只需要關心添加或者移除相關的動畫的便可以。 簡介 在過去的兩年,越來越多的同事、朋友和其他不認識的童鞋進行移動web開發的時候,都使用了transformjs,所有必要介紹一下,讓更多的人受益,提高編程效率,并享受編程樂趣。(當然transformjs不僅僅支持移動設備,支持CSS3 3D Transforms的...
摘要:主要更新版本已經支持事件回調了魚和熊掌兼得慢,什么是魚什么是熊掌魚,性能。讀取當觸發了之后,會去清除定時器。這里需要注意,當用戶傳了配置,會延遲清除定時器,因為校正的過程需要。 原文鏈接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0 背景 公司師姐昨日在KM發了篇長文,主要結論RAF+transform3d就...
閱讀 821·2023-04-26 00:37
閱讀 706·2021-11-24 09:39
閱讀 2132·2021-11-23 09:51
閱讀 3769·2021-11-22 15:24
閱讀 734·2021-10-19 11:46
閱讀 1868·2019-08-30 13:53
閱讀 2410·2019-08-29 17:28
閱讀 1314·2019-08-29 14:11