微信小程序第五篇：页面弹出效果及共享元素动画

最新推荐文章于 2026-04-16 13:41:20 发布
原创 最新推荐文章于 2026-04-16 13:41:20 发布 · 4.1k 阅读 · 19
标签
#微信小程序 #小程序
本文介绍如何使用微信小程序的page-container组件实现假页弹出效果，并利用share-element组件完成共享元素动画，使页面间的过渡更加流畅自然。

系列文章传送门：

微信小程序第一篇：自定义组件详解

微信小程序第二篇：七种主流通信方法详解

微信小程序第三篇：获取页面节点信息

微信小程序第四篇：生成图片并保存到手机相册

目录

一、page-caontainer 实现假页弹出

二、share-element 实现共享元素动画

首先我们先看一下要完成的效果：

 

我们要实现的效果就是点击歌单图片的时候，弹出一个假页并且伴随动画效果，当退出假页页面的时候，假页的歌单封面图会缩小到歌单页的封面图大小，并且移动到相应的位置。

一、page-caontai

最低0.47元/天 解锁文章
微信小程序带图片弹窗简单实现
03-29
怎样实现一个带图片显示的模态视图弹窗呢？有时候我们的确有这个需求，自己实现？不不不，哪有官方的方便！ 下面我来介绍一种使用官方组件就能实现的方法： 首先找到官方文档：​显示模态弹窗的API wx.showModal(OBJECT)  (此图片来源于网络，如有侵权，请联系删除! ) wx.showModal参数介绍 发现并没有设置图片的参数，但是这是一个API，但是组件呢？我并没有在官方文档中找到，但是经过尝试发现是可以显示一个模态弹窗的，即：   wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function(res) {
【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
Dreawer微信小程序联盟
06-25 2万+
前言 一提小程序与动画，首先想到的是什么？嗯，微信小程序独创了一套动画玩法，官方支持3种动画方案，分别是createAnimation、this.animate和CSS3动画。 1.createAnimation与Animation 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 var animation = wx.createAnimation({ transformOrig...
微信小程序开发中的动画效果和页面过渡
qq_67153941的博客
06-04 1621
通过使用微信小程序提供的动画效果接口，可以实现各种动画效果，如位移、旋转、缩放、透明度等。同时，通过路由跳转和页面栈管理，可以实现页面的过渡效果，提高用户体验。微信小程序的动画效果和页面过渡是提高小程序开发质量和用户体验的重要部分，开发者可以根据自己的需求进行调整和使用。除了基本的动画效果，微信小程序还可以实现复杂的动画效果，如渐变、缩放、旋转等组合动画。微信小程序使用页面栈管理当前打开的页面，可以通过页面栈的操作实现页面过渡效果。微信小程序提供了丰富的动画效果接口，可以通过代码实现各种动画效果。
微信小程序动画效果终极指南：Lin UI Transition与Spin组件高级用法
最新发布
gitblog_01047的博客
04-16 364
Lin UI是一个简洁、易用、灵活的微信小程序组件库，提供了丰富的动画组件帮助开发者打造流畅的用户体验。本文将详细介绍Transition过渡动画和Spin加载动画的高级用法，帮助你轻松实现专业级动画效果。 ## 为什么选择Lin UI动画组件？ Lin UI动画组件基于微信小程序原生能力开发，具有体积小、性能优、使用简单等特点。通过组件化方式封装复杂动画逻辑，让开发者无需深入CSS动画细节即
两种方法实现小程序动画效果
GcdtIteration的博客
09-19 1439
通过使用CSS动画或小程序内置动画API，可以轻松地创建各种各样的动画效果，提升小程序的用户体验。上述代码定义了一个名为"myanimation"的动画，它从0%到50%的过程中，元素的透明度从0变为1，同时进行一个放大的变换；上述代码定义了一个名为"myanimation"的动画，它从0%到50%的过程中，元素的透明度从0变为1，同时进行一个放大的变换；通过使用CSS动画或小程序内置动画API，可以轻松地创建各种各样的动画效果，提升小程序的用户体验。CSS动画是一种简单而有效的实现小程序动画效果的方法。
微信小程序开发（八）：page-container弹窗与share-element动画
Dominic_W的博客
04-09 1万+
page-container页面容器，可以在当前页面中弹出一个半屏的弹窗、或者在页面内加载一个全屏的子页面。 当page-container组件显示时，用户进行返回操作时会关闭page-container容器，而不会关闭当前页面。 每个页面最多只能显示一个page-container，如果在一个页面代码中定义了多个page-container，只有文档流中的第一个page-container能正常显示。 属性 show：是否显示page-container组件 duration：动画时长 z-index：默
微信小程序：动画效果集合
十二指环的博客
09-17 2万+
Life is like riding a bicycle.To keep your balance you must keep moving. 生活就像骑自行车。为了保持平衡，你必须不断前进。 文字跑马灯效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1038 触摸水波涟漪效果： http://www.wxap...
【愚公系列】《微信小程序与云开发从入门到实践》014-条件元素容器组件与共享元素容器组件
热门推荐
愚公智库
09-03 16万+
在微信小程序的开发过程中，组件的灵活运用是提升用户体验和界面交互的关键。条件元素容器组件和共享元素容器组件是两种强大的工具，它们不仅能够帮助开发者实现复杂的界面逻辑，还能有效提升小程序的整体性能和可维护性。条件元素容器组件允许开发者根据特定条件动态展示或隐藏内容，为用户提供更加个性化的体验。而共享元素容器组件则通过在不同页面或状态间共享元素，创造出流畅的过渡效果，使得用户在浏览过程中感受到更自然的连接。这两种组件的结合使用，不仅丰富了小程序的功能，还能够提升用户的互动体验。
微信小程序共享元素+ page-container假页实现弹出效果
苏苏就是小苏苏的博客
05-06 1万+
1.实现效果 2.实现原理 page-container page-container 小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。 tip: 当前页面最多只有
微信小程序新版渲染引擎Skyline的使用详解
javaMusic的专栏
09-09 1万+
前端微信小程序新版渲染引擎Skyline学习与使用详解。其中包括跑马灯swiper，瀑布流monsary，海报分享，worlet动画，自定义路由，手势协商，共享元素动画等。
微信小程序: 动画效果集合(收集的,说不定会用上)
青衫折扇的博客
11-21 2479
微信小程序：心跳动画https://blog.csdn.net/wtdask/article/details/82734944 文字跑马灯效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1038 触摸水波涟漪效果：http://www.wxapp-union.com/portal.php?mod=view&aid=1350 下拉菜单效果：http://www.wxapp-union.com/portal.php?mod=v
微信小程序开发中的动画效果与过渡效果
吃不胖.
10-01 1926
其中，page 类指定了一个旋转动画，通过 animation-name 属性指定动画名称，再通过 animation-duration 属性指定动画持续时间，animation-iteration-count 属性指定动画重复次数，animation-timing-function 属性指定动画的缓动效果，最后，通过设置 @keyframes 规则，指定旋转动画的具体效果。本文将介绍微信小程序中的动画效果与过渡效果，包括常用的动画类型、动画组件的使用方法、过渡效果的实现方式等。
微信小程序循环列表添加动画animation
Eleuuuuy的博客
08-17 1248
微信小程序循环列表添加动画特效并且分时间触发动画
vue-share-element vue共享元素 vue动画路由跳转
qq_43536071的博客
05-09 1165
vue-share-element npm:https://www.npmjs.com/package/vue-share-element 简介 vue-share-element基于vue的单界面路由动画跳转插件。 使用 共享元素的方式 给路由跳转增加动画。 安装 npm install vue-share-element 引用 import shareElement from "vue-share-element"; Vue.use(shareElement); // 自定义参数 Vu
如何在微信小程序中添加动画效果
qq_43580271的博客
02-14 1830
通过以上几种工具和库，你可以在微信小程序中实现丰富的动画效果。对于简单的动画需求，微信小程序自带的动画库就已经足够满足。而对于更复杂的效果，Lottie、GSAP、AniJS 等外部库能够提供更多的灵活性和强大功能。你可以根据项目需求和个人偏好选择适合的工具，提升小程序的互动性和用户体验。希望这篇文章能帮助你在开发过程中添加流畅、漂亮的动画效果！
微信小程序之自定义底部弹出框动画
JSN___的博客
07-10 1321
微信小程序之自定义底部弹出框动画 最近做小程序时，会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果，但是体验性太差，也比较简单粗暴。想要美美地玩，添加点动画还是非常有必要的。下面做一个底部上滑的弹框。 wxml <view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"></view>
小程序中的动画效果实现：从基础到高级
颖宝写论文
02-16 1417
微信小程序的动画实现从基础的 CSS 动画到复杂的 JavaScript 动画和路径动画，提供了丰富的选择。开发者可以根据具体需求选择合适的动画方式，并通过性能优化策略确保动画的流畅运行。
微信小程序官方组件展示之视图容器share-element源码
软件事业部的博客
08-17 512
共享元素是一种动画形式，类似于 flutter Hero动画，表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。 使用时需在当前页放置 share-element 组件，同时在 page-container 容器中放置对应的 share-element 组件，对应关系通过属性值 key 映射。当设置 page-container 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Frank.30

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

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

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

打赏作者

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

抵扣说明：

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

余额充值