常见经典动效实现老虎机、打字机、纸牌翻转等等
一、老虎机🎰抽奖
效果图:
实现思路:
1、将老虎机图片放置好之后,在要滚动的区域等宽的按照需要划分积分区域,设置position:absolute,如下图,再将最重要显示的区域(即绿色区域)外的部分用overflow: hidden隐藏;
2、此时需要考虑的是让积分区域滚动起来,我用的方法是使积分区域离顶部距离不断变化,从而实现一个向下的滚动效果。
3、最重要的一步,就是要确定最后滚动停留的积分位置,由于积分是随机给的,所以这里需要用到css变量,动态地计算出最后积分距顶部距离,再结合第2步滚动起来即可实现积分滚动。
4、结合实际需要添加其他后续效果。
核心代码:(小程序为例)
设置变量: --point-mid-height为中间态,可不设置;主要的是--point-final-height的计算。
-
this.setData({
-
style: `--point-final-height: ${130 * (19 - randomScore)}rpx;
-
--point-mid-height: ${130 * (19 - randomScore) * 0.7}rpx;`
-
})
-
//积分所在区域
-
.point-box {
-
display: flex;
-
flex-direction: column;
-
flex-direction: column-reverse;
-
width: 328rpx;
-
height: 131rpx;
-
background: rgba(255, 254, 238, 0);
-
position: absolute;
-
top: 0;
-
animation: bounce_box 1.5s linear 1s forwards;
-
}
-
-
@keyframes bounce_box {
-
0% {
-
top: 0rpx
-
}
-
-
50% {
-
top: var(--point-mid-height); //中间状态,可不设置
-
}
-
-
100% {
-
top: var(--point-final-height); //最终状态,积分高度
-
}
-
}
二、打字机效果
效果图:
实现思路:
实现的方法有多种,有css、js实现等等。css使用animation和steps结合;js可使用setTimeOut、setInterval、requestAnimationFrame等等。
css实现:
Steps(<number_of_steps>,<direction>): steps接收两个参数,第一个参数指定动画分割的段数;第二个参数可选,接受start和 end两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
-
div {
-
font-size: 20px;
-
/* 初始宽度为0 */
-
width: 0;
-
height: 30px;
-
border-right: 1px solid darkgray;
-
animation: write 4s steps(14) forwards, blink 0.5s steps(1) infinite;
-
overflow: hidden;
-
}
-
-
@keyframes write {
-
0% {
-
width: 0;
-
}
-
100% {
-
width: 280px;
-
}
-
}
-
-
@keyframes blink {
-
50% {
-
border-color: transparent;
-
}
-
}
demo: GitHub - 14130110048/typewriter-effect: 打字机效果
三、纸牌翻转效果
效果图:
实现思路:
1、在最外层容器元素加属性transform-style: preserve-3d,使整个元素在3d空间呈现。
注:
transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat和preserve-3d。
transform-style属性的使用语法非常简单:
transform-style: flat | preserve-3d ;
其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
2、 设置两个卡片容器,一正一反,两个容器加属性backface-visibility: hidden;
注:
backface-visibility
指定当元素背面朝向观察者时是否可见。
3、正反面容器加翻转效果。
核心代码:
-
<view class="medal-card">
-
<view class="card fornt bg"></view>
-
<view class="card back bg"></view>
-
</view>
-
.medal-card {
-
width: 283rpx;
-
height: 376rpx;
-
position: relative;
-
transform-style: preserve-3d;
-
}
-
-
.card {
-
width: 283rpx;
-
height: 376rpx;
-
position: absolute;
-
backface-visibility: hidden;
-
}
-
-
.card.fornt {
-
background-image: url(https://xxx.png);
-
transform: rotateY(180deg);
-
animation: backface 1s ease-in-out 1s normal forwards;
-
}
-
-
.card.back {
-
background-image: url(https://xxx.png);
-
animation: backface1 1s ease-in-out 1s normal forwards;
-
}
-
-
@keyframes backface {
-
100% {
-
transform: rotateY(0);
-
}
-
}
-
-
@keyframes backface1 {
-
100% {
-
transform: rotateY(180deg);
-
}
-
}
不断补充中。。。。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhabeji
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13