小程序实现公告栏等3D翻转效果

最终效果

<view class='announce' animation='{{rotate3dA}}'><view class='announce1'><image class='award_user' src='{{userInfo.avatarUrl}}'></image><text>恭喜188****2222用户中奖成为幸运儿</text></view><view class='announce2'><image class='award_user' src='{{userInfo.avatarUrl}}'></image><text>恭喜188****3333用户中奖成为幸运儿</text></view><view class='announce3'><image class='award_user' src='{{userInfo.avatarUrl}}'></image><text>恭喜188****4444用户中奖成为幸运儿</text></view><view class='announce4'><image class='award_user' src='{{userInfo.avatarUrl}}'></image><text>恭喜188****5555用户中奖成为幸运儿</text></view></view>

.announce {display: flex;flex-direction: column;align-items: center;transform: perspective(400px) rotatex(0deg) rotatey(0deg);/*拥有近大远小透视效果*/transform-style: preserve-3d;/*设置为3d空间*/position: relative;/* animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards; *//*css控制無限翻轉效果*/
}@keyframes xuanzhuan {from {transform: perspective(400px) rotatex(0deg);}to {transform: perspective(400px) rotatex(360deg);}
}.announce view {display: flex;align-items: center;position: relative;background-color: #fff;
}.announce1 {/* background-color: red; */transform:  rotatex(270deg) translatez(12.5px);
}.announce2{transform: rotatex(90deg) translatez(12.5px);/* background-color: yellow; */margin-top: -25px;
}
.announce3{transform: rotatex(180deg) translatez(12.5px);/* background-color: green; */margin-top: -25px;
}
.announce4{transform:translatez(12.5px);/* background-color: blue; */margin-top: -25px;
}.announce view text {line-height: 25px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 475rpx;
}

最好在onshow中調用rotate3d方法，因為在離開頁面和小程序時，需要清除計時器，如果在onload中調用，當清除計時器后，只有在重啟小程序后，計時器會再次生效，重新進入寫有計時器的頁面並不會使其再次生效，

// 3D翻转rotate3d: function () {var that = thisvar animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'})that.data.setInt = setInterval(function () {i++//rotate3d: 参数 x,y,z轴,  翻转度数//其中x,y,z轴为0-1范围，y轴设置为1，代表以y轴为旋转轴animation.rotate3d(1, 0, 0, 90*i).step()that.setData({rotate3dA: animation.export()})},3000)},
onUnload: function(){var that = thisi = 0//離開頁面時，使公告還原var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'})animation.rotate3d(1, 0, 0, 0).step()that.setData({rotate3dA: animation.export()})clearInterval(that.data.setInt)},onHide: function(){var that = thisi = 0//離開頁面時，使公告還原var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease'})animation.rotate3d(1, 0, 0, 0).step()that.setData({rotate3dA: animation.export()})clearInterval(that.data.setInt)},onShow: function(){var that = thisthat.rotate3d()}

小程序实现公告栏等3D翻转效果相关推荐

微信小程序实现打卡（翻转效果）
1.实现效果 2.实现原理 perspective定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素的视图. 当为元素定义 perspective 属性时,其子元素会 ...
微信小程序实现点击卡片翻转效果
动画效果: [ ------- 差个话题: 演示地址 : https://blog.csdn.net/qq_32113629/article/details/106711377 用Node.Exp ...
图片3D翻转效果 --摘自李硕老师博客160305
原文地址:http://blog.csdn.net/u012215170/article/details/50421023 ndroid手机上有众多的炫酷的设计风格,动画必然是APP的一大亮点,所以一 ...
android左右旋转动画效果图,Android新姿势：3D翻转效果原理
首先,android里是没有3D翻转的动画效果的,但是呢,android有提供一个Camera的类,可以利用这个类来实现. 先看代码,Rotate3d是继承了Animation的一个动画类,多余的代码 ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试用户名密码 css源码: /* entire container, keeps perspective */ .flip-c ...
热门小程序拆盲盒3D特效版开发
热门小程序拆盲盒3D特效版开发功能特色/ 盲盒介绍功能模式购须知行业痛点商品定价一键回收发货管理玩法介绍流程展示模式说明抽奖模式弹幕功能支收明细用户管理背景音乐用户进行 ...
小程序uniapp实现左滑删除效果
小程序uniapp实现左滑删除效果实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 < ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...

小程序实现公告栏等3D翻转效果

小程序实现公告栏等3D翻转效果相关推荐

最新文章

热门文章