【微信小程序】自定义加载动画

最新推荐文章于 2024-04-30 20:13:32 发布
最新推荐文章于 2024-04-30 20:13:32 发布
阅读量2.8k 收藏 3
点赞数
分类专栏： 知识星球 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44225182/article/details/127153407
版权
知识星球 专栏收录该内容
43 篇文章 27 订阅 ¥89.90 ¥99.00
订阅专栏

      

前言

在编写微信小程序的代码时，我们会发现：原生加载动画样式不多，可供我们设置的参数也不多。

通过查询可以得知，若是需要自己定义加载动画，一般的做法就是：在当前页面写加载动画的view代码，通过使用wx:if来控制该动画的显示。

这样做在一定程度上也是可以实现需求，但是如果每个需要过度动画的页面都复写一遍该动画view代码，那么就会显得有点冗余。

下面部分将分享如何自定义加载动画ଘ(੭ˊᵕˋ)੭

需求分析

小程序原生加载动画开放的权限

  • 自定义title：加载时显示的文字
  • 提供动画类型的选择：比如加载、完成、失败等
了解本专栏 订阅专栏 解锁全文
海轰Pro
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
微信小程序开发中的动画效果与过渡效果
吃不胖.
10-01 1508
其中，page 类指定了一个旋转动画，通过 animation-name 属性指定动画名称，再通过 animation-duration 属性指定动画持续时间，animation-iteration-count 属性指定动画重复次数，animation-timing-function 属性指定动画的缓动效果，最后，通过设置 @keyframes 规则，指定旋转动画的具体效果。本文将介绍微信小程序中的动画效果与过渡效果，包括常用的动画类型、动画组件的使用方法、过渡效果的实现方式等。
微信小程序实现自定义加载图标功能
12-12
效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果； 2.根据需求给每个动画设计不同的动画效果。 例如第一个加载图标的静态绘制 1、首先确定动画的盒子宽高； 2、设置盒子中每一个长方形的宽高以及定位（注意：此处需要将长方形的旋转中心点移动到长方形的右侧边终点，方便后期以该点旋转。）； 3、通过长方形盒子的伪元素，设置显示的长方形背景和宽高，同时进行定位。 4、由于在第二步的时候，已经将旋转中心移动，此处我们直接对每一个盒子中长方形进行旋转（注意：旋转角度 = 360 / 盒子中长方形个数）。 .circle-line{ width: 100px; h
小程序PHP开场动画,微信小程序实现登录页云层漂浮的动画效果
weixin_30070663的博客
03-26 391
微信小程序目前的火热程度相信不用多言，最近利用空余时间用小程序实现了个动态的登录页效果，所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。前言2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。上效果图(GIF动态图)当我看到这张背景...
用微信小程序做个简单旋转动画
weixin_35438610的博客
03-15 577
2.2.2、不得不说，开发环境效果确实还是不错的，但是真机预览之后，效果只出现一次，经过一系列查询发现是“animation”动画效果执行后会定格在最后的效果，若要初始化可以1、2、3、4、5、6...叭叭叭一堆方案，结果一个不好用，哎！2、“时空鸡汤”点击后打开新的页面，在页面中提供用户几个维度的鸡汤选项（自己、家人、朋友、Ta吧），选择后通过Canvas这个画布组件绘制星空粒子效果，然后粒子们向屏幕中心旋转消失，当消失的瞬间弹出一句心灵鸡汤。下期预告：马上清明了，离家甚远，做一个线上祭拜的功能吧。
uniapp微信小程序设置开屏启动动画效果
qq_41200621的博客
08-16 2395
使用uniapp搭建的微信小程序，制作小程序启动开屏动画，主要使用css动画属性。主页代码过多这里就展示重要代码片段。
微信小程序动画(七)：让页面动起来
weixin_43867717的博客
01-17 7303
本文默认读者已具备小程序基本动画api，如不了解可先阅读相关的详细介绍文章： 微信小程序动画（一）：样式 微信小程序动画（二）：旋转 微信小程序动画（三）：缩放 微信小程序动画（四）：平移 微信小程序动画（五）：倾斜 微信小程序动画（六）：矩阵变形 一： wx.createAnimation(Object object) 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。 api文档：https://
【微信小程序】动画入门keyframe
Fangyechy的博客
11-11 1214
微信小程序动画入门，animation和@keyframe的基础使用
【微信小程序｜组件库】自定义加载动画（1）
海到无边天作岸 山登绝顶我为峰
05-01 8397
前言         在编写微信小程序的代码时，我们会发现：原生加载动画样式不多，可供我们设置的参数也不多。         通过查询可以得知，若是需要自己定义加载动画，一般的做法就是：在当前页面写加载动画的view代码，通过使用wx:if来控制该动画的显示。        &nb
小程序封装加载动画
2303_76218115的博客
04-10 1519
在小程序的开发中，页面的加载过程可能会因为网络状况的不好或数据量的过大而显得非常缓慢，这时候加上一个加载动画就能有效的缓解用户的等待焦虑感。而对于应用的多个页面来说，使用全局加载动画可以提高用户体验，让应用显得更加美观和专业。本篇技术分享博客将为大家介绍在小程序中封装全局加载动画的具体实现步骤，帮助您提高小程序的用户体验。通过上述步骤，我们就完成了小程序中封装全局加载动画的具体实现方法。在实际开发中，我们可以根据实际需求对组件样式和方法进行调整和修改，以满足不同的开发需求。
微信小程序--加载动画：收缩方块
海到无边天作岸 山登绝顶我为峰
01-27 2526
效果展示 Demo代码 index.wxml <view class="loading"> <view class="a"></view> <view class="a"> </view> <view class="a"></view> <view class="a"> </view> </view> index.json { "usingCompo
微信小程序loading组件显示载入动画用法示例【附源码下载】
12-29
本文实例讲述了微信小程序loading组件显示载入动画用法。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ① index.wxml 加载中... <button type=default bindtap=loadingTap>点击弹出loading...
【微信小程序｜Demo】自定义动画-红色星球.zip
08-02
【微信小程序｜Demo】自定义动画-红色星球.zip
微信小程序实现自定义动画弹框/提示框的方法实例
01-18
在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等 如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI ...
微信小程序使用threejs实现3D模型的展示
08-23
微信小程序使用three.js实现3D模型的展示。简单Demo，快速上手，博主最近测试完美可用，可以自定义调整js里面的函数，实现3d模型的各种动画效果，比如旋转、掉落、等等，可以更好的避坑。源码包中含有虾模型，将其...
怎么用微信小程序实现远程控制台球室
最新发布
tyanzhiqi的专栏
04-30 549
怎么用微信小程序实现远程控制台球室呢？本文描述了使用微信小程序调用HTTP接口，实现控制台球室，控制球台上方的照明灯，单台设备可控制多张球台的照明灯。
【微信小程序调用百度API实现图像识别实战】-前后端加强版
m0_63057469的博客
04-27 860
微信小程序图像识别项目实战全面升级，前后端结合+数据库
微信小程序实现九宫格
weixin_45465881的博客
04-30 198
更多示例，关注我，分享更多呦~
微信小程序个人开放服务类目表
zhangfeng1133的专栏
04-30 125
上传原件或复印件， 复印件务必加盖公司公章 文件格式为jpg、jpeg、bmp、gif或png，文件大小不超过5M。字典、图片/音频/视频、计算类、报价/比价、信息查询、效率、健康管理、企业管理、记账、日历、天气、办公、预约/报名。【律师】类目需上传《律师执业资格证》，
做App小程序h5的软件 校园小程序有哪些小程序源码平台 微信小程序里发表的展示圈子 怎么将小程序分享到朋友圈小程序社区 小程序在大学校
xiaox18duoke1209的博客
04-28 672
由于学生每天课程繁忙，很多人没有时间去食堂或外面的餐厅用餐，校园外卖跑腿平台提供了便捷和快速的解决方案，满足了学生的饮食跑腿需求，并受到越来越多学生的喜爱。README.md · xiao-yi147852111/校园圈子论坛系统，APP小程序H5前后端交付，支持校园跑腿，支持校园交友，二手市场，地图找伴，交友圈等功能 - Gitee.com。在校园跑腿服务中，校园跑腿小程序的定位准确性和实时信息传播功能是最重要的。只需利用校园跑腿系统构建一个校园跑腿小程序即可，推荐校园外卖跑腿系统，它稳定且易于使用。
微信小程序自定义tabbar
04-03
微信小程序自定义tabbar需要以下步骤： 1. 创建自定义tabbar组件：在小程序根目录下创建一个名为custom-tabbar的文件夹，里面包含一个custom-tabbar组件文件和一个tabbar-icons文件夹，用于存放tabbar的icon图片。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海轰Pro

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值