• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户“添加到我的小程序”的操作提示,而且大多都是有动画效果。在高清壁纸推荐小程序首页,用户每次进入,都会在页面右上方,显示“添加小程序”的动画提示,如下图所示:

怎么实现这样的关注提示功能呢?首先,进入pages/index/index.wxml文件中,编写布局代码如下:

1 <!-- “添加小程序”的动画提示 -->
2  
3 <view hidden=\'{{isWebChatTipsHidden}}\' class=\'wx_tip\'>
4  
5   <image src="/images/tip_ios.svg"></image>
6  
7 </view>

布局代码很简单,主要是通过样式实现图片“心跳”的动画效果,接下来,进入pages/index/index.wxss文件中,编写样式代码如下:

 1 /* “添加小程序”的动画提示容器样式 */
 2  
 3 .wx_tip {
 4  
 5   position: fixed;/* 固定、停靠定位 */
 6  
 7   z-index: 120;/* 垂直方向层级,数字越大越靠前 */
 8  
 9   top: 4rpx;/* 距离顶部位置 */
10  
11   right: -40px;/* 距离右侧位置 */
12  
13   height: 120rpx;
14  
15 }
16  
17 /* “添加小程序”的动画提示图片样式 */
18  
19 .wx_tip image {
20  
21   height: 100%;
22  
23   animation: heart 1.3s ease-in-out 2.7s infinite alternate;
24  
25   /* 动画名称 动画完成一个周期所花费的秒或毫秒 动画的速度曲线 动画何时开始(延迟开始时间) 动画被播放的次数 动画是否在下一周期逆向地播放 */
26  
27 }
28  
29  
30 /* 定义“心跳”动画 */
31  
32 @keyframes heart {
33  
34   /* 开始位置 */
35  
36   from {
37  
38     transform: translate(0, 0);
39  
40   }
41  
42   /* 结束位置 */
43  
44   to {
45  
46     transform: translate(0, 6px);
47  
48   }
49  
50 }

 

在上面代码中,关键点在于:动画(animation)样式的使用。虽然说微信小程序可以直接通过逻辑代码,实现一样的动画效果,但出于便捷和灵活性考虑,一般建议还是通过样式代码来实现。

关于动画(animation)样式,有很多相关属性和知识点,这里不可能全部讲解,也不是本文的重点。下面只针对最常用和核心的animation的属性及用法做具体讲解。animation语法如下:

animation: name duration timing-function delay iteration-count direction;

各参数值说明如下表所示:

表1  animation样式参数值说明

属性

类型

animation-name

规定需要绑定到选择器的 keyframe 名称。

animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function

规定动画的速度曲线。

animation-delay

规定在动画开始之前的延迟。

animation-iteration-count

规定动画应该播放的次数。

animation-direction

规定是否应该轮流反向播放动画。

其中,animation-timing-function、animation-iteration-count和animation-direction参数的可选值如表2、表3和表4所示:

表2  animation-timing-function参数的可选值

属性

类型

linear

动画从头到尾的速度是相同的。

ease

默认。动画以低速开始,然后加快,在结束前变慢。

ease-in

动画以低速开始。

ease-out

动画以低速结束。

ease-in-out

动画以低速开始和结束。

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

表3  animation-iteration-count参数的可选值

属性

类型

n

定义动画播放次数的数值。

infinite

规定动画应该无限次播放。

表4  animation-direction参数的可选值

属性

类型

normal

默认值。动画应该正常播放。

alternate

动画应该轮流反向播放。

最后,需要在逻辑代码中,通过定时器控制“添加小程序”的动画提示,显示8秒后自动(隐藏)消失。进入pages/index/index.js文件中,编写相关代码如下:

Page({
 
  data: {
 
    /**
     * “添加小程序”的动画提示是否隐藏,默认:false,显示
     */
 
    isWebChatTipsHidden: false
 
  },
 
  onLoad: function (option) {
 
    //开启定时器:8秒后隐藏“添加小程序”的动画提示
 
    setTimeout(()=>{
 
      //更新页面数据
 
      this.setData({
 
        isWebChatTipsHidden: true
 
      });
 
    },8000);
 
  }
 
});

好了,这篇技术博客就写到这里,希望对你能有所帮助。高清壁纸推荐微信小程序源码现已开源:基于2020年新版微信小程序API开发,项目小巧,但知识点很全面,有详细的代码注释、布局技巧讲解,非常适合初学者学习,并有高级功能实现(滑动停靠及吸顶、自定义导航栏及适配等)及小程序广告位的开发,项目提供有测试接口,下载后即可运行体验;如果感觉项目不错,请点赞或转发,让更多的人能看到,谢谢!

 

项目开源链接https://gitee.com/hbcwxkj/os_bizhi_minapp

项目视频课程小程序开发入门之实战案例解析:高清壁纸推荐


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
MiniApp微信小程序入口在安卓手机桌面发布时间:2022-07-18
下一篇:
微信小程序实现pdf,word等格式文件上传发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap