效果图

微信小程序动画

创建一个动画实例 animation
调用实例的方法来描述动画
最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性
简单介绍一下例子中的几个参数和方法（其他的详见官方文档）：
下面展示一些 内联代码片。

    timingFunction: “运动”的方式，例子中的 'ease'代表动画以低速开始，然后加快，在结束前变慢 delay: 多久后动画开始运行opacity(0.2) 慢慢变透明translate(100, -100) 向X轴移动100的同时向Y轴移动-100step(): 一组动画完成，例如想让上例中的HelloWorld向右上方移动并变透明后，再次向左移动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行， 这两种变化完成之后才会进行向左运行的一步。

搭建结构

<view class=""><view class="compound"><!-- 标题 --><view class="title">开奖啦，瓜分100万</view><!-- 动画盒子 --><view class="box"><view class="circle" animation="{{animationData1}}"></view><view class="nums" animation="{{animationData2}}"><view class="num1">1</view><view class="num2">2</view><view class="num3">3</view><view class="num4">4</view><view class="num5">5</view></view><view class="center" bindtap="rotateFn"><image src="https://static.sprucesmart.com/hc.png"></image></view></view><!-- 卡片 --><view class="open" animation="{{animationData3}}" ><image src="https://i.loli.net/2021/09/15/rHTaZQhmlk36zFi.png"></image></view></view>
</view>

样式

    position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.9);.title {margin: 0 auto;text-align: center;height: 90rpx;font-size: 64rpx;font-family: PingFangSC-Semibold;font-weight: 600;color: rgba(255, 255, 255, 1);line-height: 90rpx;background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 238, 174, 1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;padding-top: 110rpx;padding-bottom: 60rpx;}.box {width: 100%;height: 750rpx;position: relative;overflow: hidden;.circle {position: absolute;top: 50%;left: 50%;width: 540rpx;height: 540rpx;margin-left: -270rpx;margin-top: -270rpx;border-radius: 50%;box-sizing: border-box;border: 4px solid rgba(220, 220, 220, 1);}.nums {position: absolute;top: 0;left: 0;bottom: 0;right: 0;&>view {position: absolute;top: 50%;left: 50%;display: block;width: 172rpx;height: 172rpx;margin-left: -86rpx;margin-top: -86rpx;background: #FF6347;border-radius: 50%;line-height: 172rpx;text-align: center;color: #ffffff;font-size: 60rpx;font-weight: bold;}&>.num1 {transform: translate(0, -280rpx); // R＝280}&>.num2 {transform: translate(266rpx, -87rpx); // R*cos(18), -R*sin(18)}&>.num3 {transform: translate(165rpx, 226rpx); // R*sin(36), R*cos(36)}&>.num4 {transform: translate(-165rpx, 226rpx); // 与3对称}&>.num5 {transform: translate(-266rpx, -87rpx); // 与5对称}}.center {position: absolute;top: 50%;left: 50%;width: 358rpx;height: 358rpx;margin-left: -179rpx;margin-top: -179rpx;&>image {display: block;width: 100%;height: 100%;}}}.open {position: absolute;top: 50%;left: 50%;width: 490rpx;height: 700rpx;margin-top: -350rpx;margin-left: -245rpx;overflow: hidden;&>image {display: block;width: 100%;height: 100%;}}
}

js

Page({/*** 页面的初始数据*/data: {animationData1: {},    // 圆环 animationData2: {},   //五张卡片animationData3: {},   //合成的卡片status:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.animation1 = wx.createAnimation({ timingFunction: 'ease', duration: 50 })this.animation2 = wx.createAnimation({ timingFunction: 'ease', duration: 50 })this.animation3 = wx.createAnimation({ timingFunction: 'ease', duration: 50 })// 初始化this.animation1.opacity(0.2).step()this.animation3.scale(0).step()// 导出动画栈this.setData({animationData1: this.animation1.export(),animationData2: this.animation2.export(),animationData3: this.animation3.export()})},// 点击“立即合成”rotateFn() {this.animation1 = wx.createAnimation({duration: 600,timingFunction: 'linear',})this.animation2 = wx.createAnimation({duration: 600,timingFunction: 'linear',})this.animation3 = wx.createAnimation({duration: 600,timingFunction: 'linear',})this.animation1.opacity(1).step()  //圆环 变亮this.animation1.scale(0.1).step({ duration: 2000, delay: 2900 })  //2900后缩小this.animation2.rotate(360).step({ duration: 3000 })  //旋转this.animation2.scale(0.1).step({ duration: 2000 })   //缩小this.animation3.scale(1.2).step({ duration: 1000, delay: 4000 })  //4000后放大this.animation3.scale(1).step({ duration: 300 })  //变正常// 导出动画栈this.setData({animationData1: this.animation1.export(),animationData2: this.animation2.export(),animationData3: this.animation3.export(),})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序实现集卡合成动画相关推荐

微信小程序合集5（便利小店+豆瓣同城+仿爱卡汽车+仿斗鱼直播+解梦）
目录便利小店微信小程序源码仿斗鱼直播微信小程序解梦微信小程序源码仿爱卡汽车微信小程序豆瓣同城微信小程序源码源码链接本文一共展示了5种不同风格的微信小程序,主要展示了便利小店可以直接扫码购 ...
微信小程序实现打卡功能
参考链接: (1)微信小程序实现签到弹窗动画 https://www.jb51.net/article/196080.htm (2)微信小程序开发(四)入门之打卡功能开发 https://blog.c ...
微信小程序资料集（下）
**8月18日小程序Demo集合** [微信小程序Demo:股票分时图.K线图](简书) [微信小程序精品Demo:知乎日报](简书) [微信小程序Demo:事项助手(在日历上添加事件备注)](简书) ...
微信小程序资料集（中）
**12月1日小程序Demo集合** [微信小程序Demo:金融理财计算器](简书) [微信小程序Demo:支付宝+微信二维码收款小程序](简书) [上滑导航吸顶效果](简书) [微信小程序Demo: ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
微信小程序scroll-view滑动卡顿，下滑时向上滑动失效
微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现 wxml文件 js文件滑动卡顿微信小程序scroll-view组件在滑动时频繁卡顿,向下滑动时,向上滑动无效,无法停止.小程 ...
[精品毕设]微信小程序班级打卡系统+后台管理系统|前后分离VUE
目录 1.项目功能介绍 2.项目资料截图 3.项目运行截图 4.项目资料获取 1.项目功能介绍 <微信小程序班级打卡系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发 ...

微信小程序实现集卡合成动画

微信小程序实现集卡合成动画

效果图

微信小程序动画

搭建结构

样式

js

微信小程序实现集卡合成动画相关推荐

最新文章

热门文章

微信小程序 实现集卡 合成动画

微信小程序 实现集卡 合成动画

效果图

微信小程序动画

搭建结构

样式

js

微信小程序 实现集卡 合成动画相关推荐

最新文章

热门文章

微信小程序实现集卡合成动画

微信小程序实现集卡合成动画

微信小程序实现集卡合成动画相关推荐