1、利用样式实现小程序动画(用法和css用法相识)
wxml 文件
<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpxheight: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({
duration: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({
duration: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: 100pxwidth: 100pxbackground-color: blue">
container
</view>
<view class="block" style="height: 100pxwidth: 100pxbackground-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: 100pxwidth: 100pxbackground-color: #ccc">
block
</view>
// 给类名为swing 的文件绑定swing 的动画
.swing{
animation: swing 5s infinite
}
微信小程序的优势十分明 显，小程序是不需要下载安装便可以使用的应用，它实现了应用触手可及的梦想，用户扫一扫或搜一下即可打开应用，也体现了用完即走的理念，用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载。小程序触及了PC网页，公众号，H5，APP无法触及的地 方，其无需安装，用完即走的理念能够满足用户需求且节省手机内存。站在小程序的拥有者的立场，其开发成本大大减小，同时可借助微信强大的流量入口，因而也降低了推广的难度。总的来说，微信小程序是一种全新的方式，能够更好地在用户和服务中建立连接，并且可以在微信中便捷地获取和传播，具有不错的使用体验。
小程序全面开放申请以后，作为企业、政府、媒体、其他组织或者个人的开发者，都可以申请并注册小程序。小程序和微信的订阅号、服务号以及企业号是并行的体系，具有独立的注册以及发布流程。
小程序的接入主要有4个步骤：
(1) 小程序注册：在微信公众平台官网首页注册并提交注册信息、完善主体信息和管理 员信息。
(2) 完善小程序信息：完善小程序的基本信息如名称、 头像及服务范围等。开发前需绑定开发者并获取APP ID，以保证程序可以通过手机进行扫码测试。
(3) 开发小程序：下载安装微信开发者工具，微信官方提供了一套完整的开发框架，开发者可以根据微信开发文档进行小程序的开发与调试。
(4) 代码审核及发布：小程序开发完成后，不能够直接发布，需提交代码与开发配置信息提交审核，完成后尚可发布。
微信Web开发者工具区别于H5的开发工具+浏览器 Device Mode预览的模式，而是基于自己的开发者工具，可以实现同步本地文件+开发调试+编译预览+上传+发布等一整套流程。同时小程序自己开发了一套WXML标签语言和 WXSS样式语言，并非直接使用标准HTML5+CSS3。同时 提供了很多原生APP的组件，之前在HTML5中需要模拟才 能实现的功能，在小程序中可以直接调用组件来实现。
小程序开发框架的核心是一个响应的数据绑定系统。 分为视图层和逻辑层，小程序开 发工具提供了视图层描述语言WXML和WXSS，以及基于 JavaScript的逻辑层框架，并在视图层与逻辑层间设置了数据传输和事件系统，使得开发者能够很简单地将重心放在数据与逻辑上。处理事务逻辑的地方被称为逻辑层。在微信小程序中，所有.js脚本文件的集合构成逻辑层。逻辑层与视图层相互配合，完成数据处理及接收事件反馈。框架的视图层由WXML与WXSS编写，通过组件进行展现。对于小程序本身，.wxml文件与.wxss文件的集合构成了视图层，逻辑层处理数据之后，会发送给视图层用于与用户的交互，同时接收用户对视图层的反馈。视图层以给定的样式展现数据并反馈事件给逻辑层，数据展现是通过组件来进行的。视图的基本构成是组件。
项目开发完成后，管理员需手动打包上传代码，填写相关配置类目并将代码提交审核，若第一次审核未通过，再次提交审核将开放提供测试的入口，该入口由开发者提供， 用于微信审核人员审核微信小程序时登录。审核后手动发布即可。
微信小程序站在月活跃用户9亿人次的微信的肩膀上，自带流量趋势，入口多，功能简单便捷。小程序功能快速迭代，意味着围绕小程序的开发和生态工具建设将会是移动互联网的一个巨大机会。目前各行业内诸多企业单位纷纷加入了小程序开发，开通了小程序功能。但小程序进行优化后，开放了很多入口，使得开发者和用户关注度不断提升。纵使一些高频和复杂应用暂时无法被小程序取代，但是一些低频应用的主要功能，只要能在小程序上实现，APP就可以完全卸载了。总的来说，微信小程序目前发展空间甚好，至于以后未来的发展仍旧不能够准确预测。
