⑴ 小程序如何使用css3動畫
1、利用樣式實現小程序動畫(用法和css用法相識)
wxml 文件
<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx; position: relative;"></image>
wxss文件
.aniamtion {
animation: mymove 5s infinite;
/* //infinite屬性是表示無限循環的意思，沒有這個屬性的話動畫只執行一次。 */
}
@keyframes mymove {
from {
/* left: 0px; */
/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); */
transform: rotate3d(100,200,300,0deg);
}
to {
/* left: 200px; */
/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); */
transform: rotate3d(200,300,400,360deg);
}
}
2、 用小程序的API來實現動畫
用wx.createAnimation(object) 來創建一個動畫 -->返回一個animation對象
創建一個動畫實例 animation。
onReady: function () {
this.animation = wx.createAnimation({
ration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
調用實例的方法來描述動畫。
Animation.step() 表示一組動畫的完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成後才會進行下一組動畫
rotate(){
this.animation.rotate(150).step() //對動畫進行簡單的描述
this.setData({
animation:this.animation.export()
})
},
最後通過動畫實例的 export 方法導出動畫數據傳遞給組件的 animation 屬性。
this.animation.export() 導出動畫隊列。export 方法每次調用後會清掉之前的動畫操作
rotate(){
this.animation.rotate(150).step() //對動畫進行簡單的描述
this.setData({ // 在setData({}) 導出動畫數據數據給組件
animation:this.animation.export()
})
},
完整的wxml
<view class="container">
<view animation="{{animation}}" class="view">
將做動畫的塊
</view>
</view>
<button type="default" size="mini" bindtap="rotate">
旋轉
</button>
完整的wxjs
Page({
data: {
animation:''
},
onReady: function () {
this.animation = wx.createAnimation({
ration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
rotate(){
this.animation.rotate(150).step().translate(100).step()
this.setData({
animation:this.animation.export()
})
}
})
3、用選擇器來綁定組件來來實現組件的動畫（小程序2.9.0 的庫可用，版本不夠會報this.animate不是一個方法）
<text>pages/index7/index7.wxml</text>
<view id="container" style="height: 100px; width: 100px; background-color: blue;">
container
</view>
<view class="block" style="height: 100px; width: 100px;background-color: #ccc;">
block
</view>
用選擇器選擇相應的組件進行相應的動畫
進行關鍵幀的處理
onLoad: function () {
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
{ opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },
], 5000)
this.animate('.block', [
{ scale: [1, 1], rotate: 0, ease: 'ease-out' },
{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},
{ scale: [2, 2], rotate: 90 },
], 5000)
},
}
4、用第三方的庫 animation.css
需要做的有
從https://daneden.github.io/animate.css/下載css動畫文件
把 .css 文件 改名成 .wxss文件（可進行相應的需改，畢竟小程序的大小限制擺在那裡）
把它引入到你的app.wxss文件中
@import 「動畫文件的相對目錄」
在用的時候把他和你的樣式綁定
<view class="swing" style="height: 100px; width: 100px;background-color: #ccc;">
block
</view>
// 給類名為swing 的文件綁定swing 的動畫
.swing{
animation: swing 5s infinite;
}
⑵ 微信小程序如何開發
如果你要定製開發小程序，建議找專業的第三方開發服務商，先看有沒有相應的模板可以套，如果有模板可以套，個別功能可以另外再開發，這樣省錢，而且可以快速上線。
1.下載微信官方的小程序開發工具，這個是編輯小程序和上傳審核小程序必須的工具。
2.如果你是開發者，有開發經驗。那你需要去看一下微信的開發文檔，看一些案列和小程序的結構語法。
3.如果你不懂代碼，不懂怎麼開發小程序，主要有以下幾種選擇方式：
選擇1：自己已有的開發團隊開發或者組建團隊開發，為什麼一定要團隊呢？小程序所需用到的東西比較多，前端後端各種都需要，簡單的展示小程序我們就不說了，這種大多數商家是不會選擇的，我們說的是具備展示+在線銷售的小程序，當然也有人能夠獨立開發一個小程序，但是相對應的開發進度會比較慢，另外這類開發者薪資都不低，找他開發的話那後期維護肯定也是他了，這個成本一下子就高了很多，如果是團隊的話開發進度會快很多，另外開發完成之後只需要出市場價留下一到兩人維護即可（正常一個人就夠了）。這種比較適合大型企業，有雄厚的資金支持。
選擇2：找專業的開發公司外包開發大多數IT工作者應該都有在這類公司或者工作室工作的經歷，直接寫需求，外包公司按你的需求去開發，開發完成你就可以直接上產品使用，當然這也是需要一定時間的，而且價格也不會便宜多少，本身工種薪資水平就不低，加上專業性，價格高也說的通，這種比較適合中型企業，有自己的定製需求，開發成本也能夠承受。
選擇3：購買代碼包，自己配置伺服器在早幾個月有很多這種在網路上售賣小程序代碼包的，有真的也有假的，假的我們就不說了，大家自己注意就行，這種小程序通常是小程序模板，沒有個性化設計，買了代碼包自己部署伺服器安裝上去就行，當然也需要一定的IT基礎，價格比前兩種選擇會便宜很多，功能類似的小程序買代碼包的價格差不多是開發的十分之一，但是這個代碼包的質量是無法保證的，建議找一個專業人士檢查測試代碼包，另外購買代碼包也需要自己維護的，所以這種方式比較適合有能力和基礎，出於其他原因不能自己開發的。能夠減少開支。
選擇4：找第三方平台，使用小程序模板相對前幾種的話第四種算是中和了各項需求，商家可以什麼都不會，直接到第三方平台試用小程序模板選擇自己想要的購買，上傳產品即可使 用，不需要擔心模板不好用，因為平台方會定期升級維護，也不需要開發時間，直接就可以使用，不需要自己配置伺服器等等，功能也會順時增加。自己只需要准備產品圖片和價格表就行。