先看下效果:
除了有點快,動畫效果還可以。常熟微信平臺開發在彈出的移動應用創建窗口,填寫相關應用的信息。填寫完畢,點擊下一步,然后繼續去填寫平臺信息,然后提交,等待審核通過。常熟微信小程序一種不需要下載安裝即可使用的應用,由騰訊于2017年1月9日首次推出。這一應用形式能使用戶不用再關心應用安裝太多的問題,實現了應用“觸手可及”的夢想,也體現了“用完即走”的理念。常熟微信開發將企業信息、服務、活動等內容通過微信網頁的方式進行表現,用戶通過簡單的設置,就能生成微信3G網站。通過微信公眾平臺將企業品牌展示給微信用戶,減少宣傳成本,建立企業與消費者、客戶的一對一互動和溝通,將消費者接入企業CRM系統,進行促銷、推廣、宣傳、售后等。形成了一種主流的線上線下微信互動營銷方式。
它是怎么實現的?
以第一部雙人舞動畫為例,對其進行研究。
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動畫風格實現的。skWandering立方是一個自定義的動畫名稱,而不是css3的定義。
把兩個正方形加到三個怎么樣?
添加一個sk-cube3,以及相應的新風格?
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.