先看下效果:
除了有點快,動畫效果還可以。常熟微信平臺開發(fā)在彈出的移動應(yīng)用創(chuàng)建窗口,填寫相關(guān)應(yīng)用的信息。填寫完畢,點擊下一步,然后繼續(xù)去填寫平臺信息,然后提交,等待審核通過。常熟微信小程序一種不需要下載安裝即可使用的應(yīng)用,由騰訊于2017年1月9日首次推出。這一應(yīng)用形式能使用戶不用再關(guān)心應(yīng)用安裝太多的問題,實現(xiàn)了應(yīng)用“觸手可及”的夢想,也體現(xiàn)了“用完即走”的理念。常熟微信開發(fā)將企業(yè)信息、服務(wù)、活動等內(nèi)容通過微信網(wǎng)頁的方式進行表現(xiàn),用戶通過簡單的設(shè)置,就能生成微信3G網(wǎng)站。通過微信公眾平臺將企業(yè)品牌展示給微信用戶,減少宣傳成本,建立企業(yè)與消費者、客戶的一對一互動和溝通,將消費者接入企業(yè)CRM系統(tǒng),進行促銷、推廣、宣傳、售后等。形成了一種主流的線上線下微信互動營銷方式。
它是怎么實現(xiàn)的?
以第一部雙人舞動畫為例,對其進行研究。
mxml:
View class = "sk-wandering-cubes" view class = "sk-cube sk-cube 1" / view view class = "sk-cube sk-cube2" / view
css:
Sk WanderingCube.sk cube background color: 67cf22; width: 10px; height: 10px; position: absolute; top: 0; left: 0; - WebKit animation: sk WanderingCube 1.8s Ease In Out-1.8s Infinite; anion: sk WanderingCube 1.8s Ease In Out-1.8s Both;.InfInfinisk WanderingCube 2-IT animation delay: -0.8s 9s; Animation Delay: -0.9s; @-Webkit Key Frame sk WanderingCube 0%-Webkit Conversion: Rotation; Conversion: Rotation; 25%-Webkit Conversion: Translatix Rotation Ratio; Conversion: Translatix Rotation Ratio; 50%/* Hacker Makes FF Rotate to Right*/-Webkit Tra Conversion: Transx Translational Rotation; Conversion: Transx Translational Rotation Tate; 50.1% - WebKit transform: translatex translatey rotate; transform: translatex translatey rotate; 75% - WebKit transform: translatex translatey rotate scale; transform: translatex translatey rotate scale; 100% {- WebKit transform: rotation; transform: rotation;
它是用css3動畫風(fēng)格實現(xiàn)的。skWandering立方是一個自定義的動畫名稱,而不是css3的定義。
把兩個正方形加到三個怎么樣?
添加一個sk-cube3,以及相應(yīng)的新風(fēng)格?
View class= "sk cube sk-cube 3"/view.sk-wandering-cubes.sk-cube 3-webkit animation delay: -0.45s; animation delay: -0.45s;
運行一下,不失所望:
如果你放慢動畫的速度,讓三個方塊平均分布。讓它們在空間中均勻分布,即平均動畫時間。
為了達到這一效果,修改每幀0.6秒的間隔:
.sk-wandering-cubes .sk-cube {background-color:#67cf22;Width: 10px; Height: 10px; Position: Absolute; Top: 0; Left: 0; -webkit-animation: sk-wanderingCube 1.8s easy- In-out -1.8s infinite both;}. Sk-wandering-cubes .sk-cube2 {-webkit-animation-delay:-0.6s;}. Sk-wandering- cube .sk-cube3 {-webkit-animation-delay:-1.