先看下效果：
除了有點(diǎn)快，動(dòng)畫(huà)效果還可以。常熟微信平臺(tái)開(kāi)發(fā)在彈出的移動(dòng)應(yīng)用創(chuàng)建窗口，填寫(xiě)相關(guān)應(yīng)用的信息。填寫(xiě)完畢，點(diǎn)擊下一步，然后繼續(xù)去填寫(xiě)平臺(tái)信息，然后提交，等待審核通過(guò)。常熟微信小程序一種不需要下載安裝即可使用的應(yīng)用，由騰訊于2017年1月9日首次推出。這一應(yīng)用形式能使用戶不用再關(guān)心應(yīng)用安裝太多的問(wèn)題，實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，也體現(xiàn)了“用完即走”的理念。常熟微信開(kāi)發(fā)將企業(yè)信息、服務(wù)、活動(dòng)等內(nèi)容通過(guò)微信網(wǎng)頁(yè)的方式進(jìn)行表現(xiàn)，用戶通過(guò)簡(jiǎn)單的設(shè)置，就能生成微信3G網(wǎng)站。通過(guò)微信公眾平臺(tái)將企業(yè)品牌展示給微信用戶，減少宣傳成本，建立企業(yè)與消費(fèi)者、客戶的一對(duì)一互動(dòng)和溝通，將消費(fèi)者接入企業(yè)CRM系統(tǒng)，進(jìn)行促銷、推廣、宣傳、售后等。形成了一種主流的線上線下微信互動(dòng)營(yíng)銷方式。
它是怎么實(shí)現(xiàn)的？
以第一部雙人舞動(dòng)畫(huà)為例，對(duì)其進(jì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動(dòng)畫(huà)風(fēng)格實(shí)現(xiàn)的。skWandering立方是一個(gè)自定義的動(dòng)畫(huà)名稱，而不是css3的定義。
把兩個(gè)正方形加到三個(gè)怎么樣？
添加一個(gè)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;
運(yùn)行一下，不失所望：
如果你放慢動(dòng)畫(huà)的速度，讓三個(gè)方塊平均分布。讓它們?cè)诳臻g中均勻分布，即平均動(dòng)畫(huà)時(shí)間。
為了達(dá)到這一效果，修改每幀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.
