⑴ 小程序如何使用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：找第三方平台，使用小程序模板相对前几种的话第四种算是中和了各项需求，商家可以什么都不会，直接到第三方平台试用小程序模板选择自己想要的购买，上传产品即可使 用，不需要担心模板不好用，因为平台方会定期升级维护，也不需要开发时间，直接就可以使用，不需要自己配置服务器等等，功能也会顺时增加。自己只需要准备产品图片和价格表就行。