微信小程序加载动画文件

已于 2024-07-16 15:42:23 修改
阅读量820 收藏
点赞数 3
文章标签： 微信小程序 小程序
于 2024-07-16 15:40:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012212157/article/details/140467918
版权

最近在做微信小程序的动画，调研了几种方案

  1. PAG
    腾讯自家的，分为完整版和lite版，对于矢量动画挺好的，但是位图会有问题
    完整版会逐渐卡死，lite虽然不会卡死，但是很模糊，优点是动画文件很的很小。小程序版本疑似不维护了。

  2. spine
    spine的动画文件也真的很小啊，但是软件要钱，需要采购，另一方面官方并不支持小程序，第三方个人修改的多多少少有点bug，或者兼容性

  3. Galacean Effects
    蚂蚁的Galacean Effects，做些简单的效果不错，其他平台支持spine，小程序不支持，同样的动画文件大小有点大

  4. Lottie
    动画效果好，文件大

  5. svag
    动画效果好，文件相对小很多，已经压缩到极致，gzip无效了。项目中使用的是这个

hellosnowyy
关注
【微信小程序】自定义加载动画2
海到无边天作岸 山登绝顶我为峰
10-03 1409
Hello！ଘ(੭ˊᵕˋ)੭昵称：海轰标签：程序猿｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，获得过国家奖学金，有幸在竞赛中拿过一些国奖、省奖…已保研学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！唯有努力💪。
【微信小程序｜组件库】自定义加载动画（1）
海到无边天作岸 山登绝顶我为峰
05-01 9491
前言         在编写微信小程序的代码时，我们会发现：原生加载动画样式不多，可供我们设置的参数也不多。         通过查询可以得知，若是需要自己定义加载动画，一般的做法就是：在当前页面写加载动画的view代码，通过使用wx:if来控制该动画的显示。        &nb
基于wepy开发的微信小程序loading加载动画组件
08-10
基于wepy开发的微信小程序loading加载动画组件
微信小程序loading加载动画
苏苏就是小苏苏的博客
03-04 5568
1.实现效果 2.实现原理 伪元素 animation 3.实现代码 <view class="box"> <view class="charge"> <view class="wave"></view> </view> </view> <view class="box"> <view class="loading1"></view> </view> <vi
微信小程序加载动画
ddzr972435946的博客
06-10 2119
补充一下这篇文章 里的第二个例子的代码。 wxml 文件： <view class="tui-loading-row"> <view class="tui-loading-cell"> <!--第一个动画，省略，见原文章--> </view> <view class="tui-loading-cell"> <view class="circle-line-spin" > <tex...
微信小程序--加载动画【水波涟漪效果】
weixin_44266024的博客
12-07 680
微信小程序--加载动画【水波涟漪效果】
微信小程序纯CSS实现好看的加载动画
Qensq的博客
04-01 1862
【代码】微信小程序纯CSS实现好看的加载动画。
微信小程序-加载及完成动画-loadingAnim.rar
01-11
微信小程序提供了一套自定义组件和API，使得开发者能够方便地创建各种类型的加载动画。例如，可以使用wx.showLoading()方法显示一个简单的加载提示，并通过wx.hideLoading()关闭它。此外，还可以通过自定义组件的...
微信小程序加载fbx模型
03-08
这个压缩包里面包含three.js在微信小程序端加载3D动画fbx模型的代码。 得到了fbx模型的http链接，使其加载在小程序端，都是适配小程序版本的代码 其中three_new.js是小程序版的3D加载库文件 FBXLoader_new是小...
微信小程序实现罗盘动画
最新发布
02-07
微信小程序主要由WXML（WeiXin Markup Language）、WXSS（WeiXin Style Sheets）、JS（JavaScript）和JSON配置文件组成。WXML用来构建页面结构，WXSS类似于CSS，用于设置页面样式，JS用于处理逻辑和数据，JSON用于...
miniprogramThree:微信小程序 加载外部3d模型
08-04
本篇文章将深入探讨如何在微信小程序中利用three.js加载外部3D模型，为用户提供更加丰富的交互体验。 首先，我们需要了解three.js。three.js是一个基于WebGL的JavaScript 3D库，它简化了在浏览器中创建3D图形的过程...
微信小程序封装上传文件组件
03-10
在微信小程序开发中，经常会遇到需要用户上传图片的需求，例如发布动态、个人头像设置等。...总的来说，封装上传文件组件是微信小程序开发中常见的任务，理解并掌握其原理和实践方法对提升开发效率至关重要。
微信小程序开发动感十足的加载动画--都在这里！
热门推荐
findhappy117的博客
10-17 2万+
代码地址如下：http://www.demodashi.com/demo/14242.html 一、前期准备工作 软件环境：微信开发者工具 官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1、基本需求。 实现加载动画 带动画（动画可做参靠，个人要是觉得不好看可以自定义动画） 2、案例目录结构 ...
模拟微信小程序加载动画
T3165919332的博客
08-22 2105
效果：绿圆会围着轨道旋转。
微信小程序--加载动画：旋转方块
海到无边天作岸 山登绝顶我为峰
12-11 2568
效果展示 Demo代码 wxml <view class="loading-screen"> <view class="loading"> <view class="flour" ></view> <view class="flour" ></view> <view class="flour" ></view>
小程序封装加载动画_小程序加载动画
2401_84187563的博客
04-12 943
在需要用到加载动画的地方，通过调用App.js中的showLoading方法显示Loading动画，并在数据加载完毕后调用hideLoading方法关闭Loading动画。封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画，在数据加载完成后关闭动画。由于需要在所有页面中使用，我们需要将加载动画封装成一个全局组件，供所有页面调用。在App.js中加载自定义组件Loading，并设定全局方法showLoading和hideLoading来显示和隐藏Loading组件。
uniapp微信小程序加载spine动画
weixin_42623482的博客
05-23 3159
uniapp加载spine动画
微信小程序 页面显示加载动画
^璐三岁要耍蓅氓♡
03-26 1万+
//页面显示加载动画 showNavigationBarLoading: function () { wx.showNavigationBarLoading() },//页面隐藏加载动画 hideNavigationBarLoading: function () { wx.hideNavigationBarLoading() }//设置页面标题 wx.setNavigat...
小程序之加载动画
tzjvon的博客
07-27 3030
<loading hidden="{{ loadingHidden }}"> 加载中... </loading>
微信小程序 加载动画
01-18
### 微信小程序中实现加载动画的方法 #### 使用自定义加载动画 在微信小程序中，可以通过`wx.showLoading` API 来展示简单的加载提示框[^3]。此方法允许指定加载时显示的文字，并可以选择是否启用蒙层来阻止用户操作。 对于更加复杂的加载动画需求，则可以借助于WXML 和 WXSS 的组合使用来自定义加载动画的效果。例如： ```html <!-- WXML --> <view class="loading-container"> <image src="/images/loading.gif"></image> </view> ``` ```css /* WXSS */ .loading-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; } ``` 上述代码片段展示了如何通过引入 GIF 文件作为加载图标并居中显示在整个屏幕中央的位置上[^4]。 另外一种常见的做法是采用 CSS 动画属性配合 `animation` 或者 `@keyframes` 定义动画序列，从而达到更丰富的视觉效果。比如创建一个旋转的圆形进度条： ```css /* WXSS */ .loader, .loader:before, .loader:after { border-radius: 50%; width: 2em; height: 2em; animation-fill-mode: both; animation: load7 1.8s infinite ease-in-out; } @keyframes load7 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } ``` 以上实例说明了如何运用CSS3特性构建具有吸引力且易于理解的等待指示器[^1]。 为了确保最佳用户体验，在实际项目里还可以考虑结合 JavaScript 控制逻辑判断何时启动/停止这些动画过程，以及处理特殊情况下的反馈信息呈现等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值