wepy小程序（多张卡片）合成动画

描述

7张卡片合成一张新卡片
7张卡片绕环形旋转
更多的特效可以自己增加哦

方法

卡片的初始位置相同，所以每张卡片都需要一个单独的动画来控制它的旋转角度
transform-origin控制卡片的旋转路径

代码

html

 <repeat for="{{cardsList}}" index="index" key="index" item="item"><view class="card{{index}} common" style="animation: {{rotateEnable?'spin-'+index:''}}  4.2s ease-in .8s 1;"><image class="img-card“  src="a.png" mode="widthFix"></image></view></repeat>


.cards {position: relative;height: 660rpx;width: 660rpx;border-radius: 50%;margin-top: 20rpx;
}.cards .compose-card {width: 660rpx;margin-top: 272rpx;
}.cards .compose-card .common {height: 142rpx;transform-origin: 50% 50%;
}.cards .compose-card .common .img-card {width: 108rpx;height: 142rpx;transition: all 1s;
}.card1 {transform: rotate(90deg);
}.card1 .img-card {transform: rotate(-90deg);
}.card2 {margin-top: -142rpx;transform: rotate(140deg);
}.card2 .img-card {transform: rotate(-140deg);
}.card3 {margin-top: -142rpx;transform: rotate(195deg);
}.card3 .img-card {transform: rotate(-195deg);
}.card4 {margin-top: -142rpx;transform: rotate(245deg);
}.card4 .img-card {transform: rotate(-245deg);
}.card5 {margin-top: -142rpx;transform: rotate(295deg);
}.card5 .img-card {transform: rotate(-295deg);
}.card6 {margin-top: -142rpx;transform: rotate(-15deg);
}.card6 .img-card {transform: rotate(15deg);
}.card7 {margin-top: -142rpx;transform: rotate(40deg);
}.card7 .img-card {transform: rotate(-40deg);
}/*旋转*/
@keyframes spin-1 {from {transform: rotate(90deg);}to {transform: rotate(4050deg);}
}@keyframes spin-2 {from {transform: rotate(140deg);}to {transform: rotate(4100deg);}
}@keyframes spin-3 {from {transform: rotate(195deg);}to {transform: rotate(4145deg);}
}@keyframes spin-4 {from {transform: rotate(245deg);}to {transform: rotate(4195deg);}
}@keyframes spin-5 {from {transform: rotate(295deg);}to {transform: rotate(4245deg);}
}@keyframes spin-6 {from {transform: rotate(-15deg);}to {transform: rotate(3945deg);}
}@keyframes spin-7 {from {transform: rotate(40deg);}to {transform: rotate(4000deg);}
}

注意

卡片旋转后img也会旋转，所以每一个卡片区要单独把img旋转成正常的
卡片的高度和transform-origin 区域里的高度要一致

wepy小程序（多张卡片）合成动画相关推荐

微信小程序实现集卡合成动画
微信小程序实现集卡合成动画效果图微信小程序动画搭建结构样式 js 效果图微信小程序动画创建一个动画实例 animation 调用实例的方法来描述动画最后通过动画实例的 export ...
微信小程序点击卡片切换动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: html <view class='aa'><image animation=&qu ...
微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
【微信小程序】自定义加载动画3
目录效果图配置版本1 版本2 结语效果图配置配置方法参考上一篇文章:[微信小程序]自定义加载动画版本1 Component({behaviors
【微信小程序】自定义加载动画4
目录效果图配置文件结语效果图配置文件配置方法参考上一篇文章:[微信小程序]自定义加载动画组件源代码: Component({behaviors: [],properties: {
【微信小程序—动画工坊】动画入门keyframe
[微信小程序-动画工坊]动画入门前情需要了解的前置知识: 子代选择器基本布局分析可以将任务进行一下拆分. 如何让小球跑动起来? 通过@keyframe创造动画函数,然后再通过animatio ...
小程序自定义分享卡片
小程序自定义分享卡片在微信小程序项目开发中,有将分享卡片,发送到微信群或者发送给个人的需求文章目录小程序自定义分享卡片前言一.分享功能介绍二.代码实现 1.实现思路一 2.实现思路二总结 ...
快速入门 WePY 小程序
一.WePY介绍 WePY 是腾讯参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都 ...
wepy小程序聊天记录选择文件上传 wx.chooseMessageFile 带有进度条动画支持文档打开完整记录
#需求:从聊天记录中选择文件,支持的文件格式doc, docx, pdf,同时支持上传的文档打开文件选择与上传文件后展示模版代码: <van-cell title="从微信聊天记录中 ...

wepy小程序（多张卡片）合成动画

描述

方法

代码

注意

wepy小程序（多张卡片）合成动画相关推荐

最新文章

热门文章