微信小程序实现登录页云层漂浮的动画效果

2024-02-23 14:42:45

前言

2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。

上效果图(GIF动态图)

当我看到这张背景图的时候，强迫症立马来了，这云朵为什么不动，于是开始了一波折腾。

知识点

认识animation

animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

认识translate

方法特别多，本文主要用2个。

translate3d(x,y,z)定义 3D 缩放转换。
rotate3d(x,y,z,angle) 定义 3D 旋转。

translate3d(1,1,0)

你可以理解为（左右，上下，大小）变化。

rotate3d(1,1,0,45deg)

实现

1.两朵云除了大小和初始位置不通，其他都相同。

.cloud {
 position: absolute;
 z-index: 3;
 width:99px;height:64px; top: 0;
 right: 0;
 bottom: 0;
 animation: cloud 5s linear infinite;
}

@keyframes cloud {
 from {
 transform: translate3d(-125rpx, 0, 0);
 }

 to {
 transform: translate3d(180rpx, 0, 0);
 }
}

其中rpx是微信特有的属性，不受屏幕大小的影响，类似于安卓里的dp单位。keyframes是匀速移动，从css里可以看到只改变了左右方向。

2.头像本来想加个吊篮，像荡秋千一样的荡漾，但是没有成功，只是随便搞了个飘来飘去的动画。

代码如下

@keyframes pic {
 0% {
 transform: translate3d(0, 20rpx, 0) rotate(-15deg);
 }
 15% {
 transform: translate3d(0, 0rpx, 0) rotate(25deg);
 }
 36% {
 transform: translate3d(0, -20rpx, 0) rotate(-20deg);
 }
 50% {
 transform: translate3d(0, -10rpx, 0) rotate(15deg);
 }
 68% {
 transform: translate3d(0, 10rpx, 0) rotate(-25deg);
 }
 85% {
 transform: translate3d(0, 15rpx, 0) rotate(15deg);
 }
 100% {
 transform: translate3d(0, 20rpx, 0) rotate(-15deg);
 }
}

没想到keyframes不仅有支持from to还支持百分比，不错。这里，只要控制好层级关系、动画时长、透明度即可实现云层漂浮。

总结

不得不说css还是有很多动画的，也有很多特效，微信小程序里加一点动画，能使页面稍微美观点。当然，复杂点的动画，只能有机会再更新。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

微信小程序小程序制作及动画（animation样式）详解

微信小程序制作实现效果图: 微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 在看到上图,小伙伴
微信小程序动画的简单实例

微信小程序--简易动画案例 wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js:
微信小程序开发animation心跳动画效果

本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1.微信小程序开发animation心跳动画 wxml文件中: <view class="bottomViewItem"> <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> <view class="bo
微信小程序的动画效果详解

前言由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ
微信小程序开发之麦克风动画帧动画放大淡出

想做个录音机,第一步就卡在麦克风动画这里了. 先上gif.再吐槽. ① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动画.我在微信小程序文档动画最下面找到这么一行字.这个锅是不是可以甩出去了? ps:如果有同学能实现动画循环,一定告诉我. ② 麦克风里面是个帧动画.没有前端的基础,只能用非主流的办法凑合了. 用wx:if{{}}判断js中定义的值是不是等于图片对应的数字来控制图片的显示和隐藏.
微信小程序连续旋转动画（this.animation.rotate）详解

微信小程序连续旋转动画一..js中封装旋转动画方法添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear'
微信小程序开发之animation循环动画实现的让云朵飘效果

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所
微信小程序开发之录音机音频播放动画实例 (真机可用)

趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,
微信小程序实现登录页云层漂浮的动画效果

前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GIF动态图) 当我看到这张背景图的时候,强迫症立马来了,这云朵为什么不动,于是开始了一波折腾. 知识点认识animation animation 属性是一个简写属性,用于设置六个动画属性: 值描述 animation-name 规定需要绑定到选择器的 keyframe 名称 animation-duration 规定完成动画所花费的
微信小程序新建登录页并实现tabBar隐藏

微信小程序新建登录页并实现tabBar隐藏实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar-->list-->pagePath 不能写登录页面的路径,并且首页跳转到登录页时,用 navigateTo 跳转到新页面即可实现tabBar的隐藏,如下图所示: login页面如何设置整个页面都是蓝色(#2da1ed)? 在login.json里面设
微信小程序实现元素渐入渐出动画效果封装方法

开端之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了.做到类似jQuery show()的效果原创文章,允许转载分享.但请转载请一定标明出处,这是起码的尊重本文章阅读前需要对微信小程序的动画api有所了解先看效果可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画解决 1.寻根问底,发现
微信小程序商品详情页规格属性选择示例代码

detail.wxml展示页面  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &
微信小程序授权登录的优雅处理方式

前言当微信小程序项目中涉及到获取用户信息并实现用户登录时,可以通过微信官方提供的登录能力方便地获取微信的用户身份标识,快速建立小程序内的用户体系.官方文档只是提供如何去调用授权登录,如果直接原封不动的照搬文档来进行代码编写,这样势必会造成代码的维护性差,所以本篇着重介绍如果更优雅的处理微信小程序的授权登录. 授权登录的基本流程上图是微信小程序官网提供的授权登录基本流程图,这里我只从前端开发的角度来讲解一下该流程. 通过wx.login()获取临时登录凭证code. 通过调用服务端提供的接口把
微信小程序实现登录界面

微信小程序的登录界面实现,供大家参考,具体内容如下 <view class="container"> <view class="wrapper"> <view class="left-top-sign">LOGIN</view> <view class="welcome"> 欢迎回来! </view> <view class="input-
微信小程序静默登录和维护自定义登录态详解

目录 1.背景 2.什么是静默登录? 3.如何维护自定义登录态 4.静默登录整体流程 4.1app.onLaunch中发起登录 4.2处理小程序不支持异步阻塞 4.2.1粗糙的方案 4.2.2优雅的方式 4.3 整体流程图 5.写在最后 1.背景在小程序中,openid是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户,就如同你的身份证一样. 2.什么是静默登录? 在普通的应用中,用户通过表单验证登录建立用户体系,这种常见的登录方式一般是通过登录页面表单进行登录,对用户来
微信小程序后台登录（非微信账号）实例详解

微信小程序后台登录实现效果图: 最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录.由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以写的时候各种坑,现在把趟好坑的代码共享给大家吧!(PS:如有不妥之处,共勉之.) 废话不说,直接上代码找到app.js在里面写如下代码 App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('log
微信小程序外卖选购页实现切换分类与数量加减功能案例

本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能.分享给大家供大家参考,具体如下: 关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤: 效果图实现以下功能一. 点击分类项,切换右边的食品,并高亮自身这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可. categoryStates = categoryStates.map(function (item, i) { if (index == i) { i
微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ success: (res) => { console.info(res.authSetting); wx.getUserInfo({ success: res => { this.globalData.userInfo = res.userInfo console.info("一开始同

微信小程序实现登录页云层漂浮的动画效果

相关推荐

随机推荐