首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用OnTapGesture事件播放我的lottie动画?

OnTapGesture事件是一种手势识别事件,用于在用户点击屏幕时触发相应的操作。而Lottie是一个用于播放矢量动画的开源库。结合这两者,我们可以通过OnTapGesture事件来触发播放Lottie动画的操作。

要使用OnTapGesture事件播放Lottie动画,可以按照以下步骤进行:

  1. 导入Lottie库:首先,确保你的项目中已经导入了Lottie库。你可以通过在项目的依赖中添加Lottie库的引用来实现。
  2. 创建Lottie动画视图:在你的视图中创建一个Lottie动画视图,并设置相应的动画文件。你可以使用Lottie提供的方法来加载和设置动画文件。
  3. 添加OnTapGesture事件:在你的视图中添加一个OnTapGesture事件,并在事件处理程序中编写代码来播放Lottie动画。你可以使用Lottie提供的方法来控制动画的播放、暂停、停止等操作。

下面是一个示例代码,演示了如何使用OnTapGesture事件播放Lottie动画:

代码语言:txt
复制
import SwiftUI
import Lottie

struct ContentView: View {
    @State private var isAnimating = false

    var body: some View {
        VStack {
            LottieView(filename: "animation") // 替换为你的动画文件名
                .frame(width: 200, height: 200)
                .onTapGesture {
                    self.isAnimating.toggle()
                }
                .onAppear {
                    self.isAnimating = true
                }
                .onDisappear {
                    self.isAnimating = false
                }
        }
    }
}

struct LottieView: UIViewRepresentable {
    var filename: String

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView()
        let animation = Animation.named(filename)
        view.animation = animation
        view.loopMode = .loop
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        if uiView.isAnimationPlaying != isAnimating {
            if isAnimating {
                uiView.play()
            } else {
                uiView.stop()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上面的示例代码中,我们创建了一个名为ContentView的视图,其中包含一个LottieView作为子视图。LottieView是一个遵循UIViewRepresentable协议的自定义视图,用于创建和更新Lottie动画视图。

LottieView中,我们使用makeUIView方法创建了一个AnimationView实例,并设置了相应的动画文件。在updateUIView方法中,我们根据isAnimating的值来控制动画的播放和停止。

ContentView中,我们使用onTapGesture事件来切换isAnimating的值,从而触发动画的播放和停止。同时,我们在视图出现和消失时分别设置isAnimating的初始值,以确保动画的正确播放。

这样,当用户点击LottieView时,就会触发onTapGesture事件,从而切换动画的播放状态。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【译】Activity分割动画如何使用我的动画##

我的思路很简单: Activity A保存为bitmap 把bitmap分割成两个子bitmap 子bitmap传递至Activity B 在Activity B的布局之上显示两个子bitmap 使用动画向外移出两个子...对于低内存或者大屏幕的设备来说,可能是很大的开销。如果你依然选择使用,请小心,并且不要过度使用。...但是我发现,最简单的实现方式,就是将他们以成员变量的形式放到一个公共区域中。所以,我创建了一个静态类用来持有子bitmap,所有的创建操作和动画逻辑,也都在这里个类里面,稍后会详细介绍。...我使用硬件加速(了解更多有关硬件加速动画,请阅读我最新发布的blog)并且在动画结束或者取消后,做了一些清理操作(如,移除硬件图层,把Imageview从Window窗口移除等等) 如何使用我的动画##...我曾反复思考,在尽量不限制开发者的情况下,如何最简单便捷的使用它。

1.4K20

复杂帧动画之移动端video采坑实现

在企鹅辅导品牌页中,我们需要实现一个动画如下: 页面滚动到动画区域,播放动画, 对应动画部分如下: 帧动画当前的实现有以下几种方式: GIF 动画 大家比较熟悉的图片格式 lottie(http:...//airbnb.io/lottie/) Airbnb 开源项目,通过解析 AE 动画为 json 数据,支持跨平台的动画效果解决方案;lottie 在辅导中已经有实际应用,使用过的同学都表示对其实现效果和开发速度表示称赞和推荐...实现,右图为我我们的目标实现效果 可以看到实现还是存在着差异,颜色、数字倾斜度、虚线的透视都没有达到预期,于是放弃lottie 的使用,但这并不否定 lottie 在实现其它动画的优秀效果 APNG...这里使用变量来表示视频是否已经播放,如果已经播放就不再执行 touch 事件,避免频繁调用 play 有些安卓浏览器无法自动播放,touch 事件也无法触发播放 video 标签的 play 方法返回一个...无奈之下, 针对安卓的微信端,视频全部启用兼容模式(几张图片渐隐渐现) 论安卓浏览器的各种诡异表现 我:"设计小哥哥,这我无能为力 设计:"找出所有对应的机型和浏览器,对这些不支持的浏览器使用兼容模式播放动画

2.3K10
  • lottie系列文章(二):lottie最佳实践

    的js文件及json文件加载方案的考量 使用lottie-web的解决方案,需要加载lottie-web的js文件以及动画相应的json文件,这两个文件的大小都比较大,所以我们应该根据需要,确定其加载方式...一般情况下,我们只需要svg格式的动画,所以可以使用lottie_light版本(仅支持svg渲染)。...lottie的使用 下面讲一些lottie的常用方法。...在unmount的时候,需要调用该方法 lottie-web常用的事件 我们在lottie-web中可能也需要监听一些事件,比如加载完动画json文件时的data_ready事件。...,前端加载该动画后,相应的图层的class会被设置为svgClass,可以通过dom方法获取这些元素并做相应的操作; 动画json文件制作及导出规范 使用该方案制作动画时,有些动画效果lottie-web

    5.5K31

    从设计师和开发的角度使用 lottie

    如下图: image.png 官网宣传了3个特性: 灵活使用AE的特性 随心所欲控制你的动画 很小的文件体积 个人认为 lottie 最大的优势就是可以将设计师设计的动图原原本本的在页面上展现出来,完美还原了动画的精细度...下面讲讲如何从 Sketch 开始,制作一个 lottie 动画文件。...这里我简单说说其中 lottie-web 的使用。.../assets/cycle_animation.json', }) 参数/api/事件 loadAnimation 的参数 名称 描述 container 用于渲染的容器,一般使用一个 div 即可 renderer...,参数1为数组,两个元素为开始帧和结束帧;参数2为,是否立即播放片段,还是等之前的动画播放完成 destroy 无 销毁 事件 onComplete onLoopComplete onEnterFrame

    3.3K21

    动画菜鸡的自我救赎之企鹅辅导品牌页开发总结

    一般来说,品牌介绍页都是少不了各种动画的。这里我列出了辅导品牌页的三个主要的动画,后面我会讲我的实现 隧道动画: ? 页面滑动到隧道位置的时候,会触发隧道动画的自动播放。...最后,还有一个问题是,使用动图可能动图大小会比较大。 video 动画效果也可以通过视频来实现,采用视频的方式,甚至还能调节动画播放的进度,不像动图一样只能自动播放。...一开始我让设计同学将路的动画和隧道的动画一起导出,后面发现lottie播放路动画的时候,路变成了黑色的,可能是lottie对于透明度的支持也不是很好。...右边的tab是跟着隧道一起运动的,lottie可以监听进入每一帧的事件,在每一帧里,可以根据隧道当前播放的位置,确定右边tab的位置。 教研团队代表动画 ?...这里主要是要看到小男孩的动画,以及轴动画。 一开始我看到这个小男孩动画的时候,我想的是用lottie来实现。但是使用了lottie之后,发现效果与实际效果差别很大。

    1.8K41

    Lottie-页面动画100%硬核还原

    大家好,我是前端实验室的大师兄! 最近大师兄开发大屏页面碰到一个困境:动画还原。 照着设计动画模仿,猜测动画时长,手创建贝塞尔曲线…… 调整细节耗时耗力,效果还差强人意......下面是Lottie提供的官方效果图。类似下面这种一段动画的播放,非常适合使用Lottie来做。 Lottie流程 我们先来看下整个流程简图。...设计师用AE把动画效果做出来,再用Bodymovin导出相应的json文件给到前端,前端使用Lottie库就可以实现动画效果。功能简单且强大。...设置渲染器 Lottie动画监听 Lottie提供了用于监听动画执行情况的事件: complete loopComplete enterFrame segmentStart config_ready(初始配置完成...) data_ready(所有动画数据加载完成) DOMLoaded(元素已添加到DOM节点) destroy 可使用addEventListener监听事件 // 动画播放完成触发 anm.addEventListener

    1.1K40

    复杂帧动画之移动端video采坑实现

    开源项目,通过解析 AE 动画为 json 数据,支持跨平台的动画效果解决方案;lottie 在辅导中已经有实际应用,使用过的同学都表示对其实现效果和开发速度表示称赞和推荐。...给到我们前端开发,在使用这段 json 数据中,我们引入了 lottie-web 脚本来解析这段 json 数据渲染成为SVG / canvas 动画,效果如下图, 左图为用 lottie 实现,右图为我我们的目标实现效果...可以看到实现还是存在着差异,颜色、数字倾斜度、虚线的透视都没有达到预期,于是放弃lottie 的使用,但这并不否定 lottie 在实现其它动画的优秀效果 APNG 在对设计师给到的分段的动画帧图片压缩之后...这里使用变量来表示视频是否已经播放,如果已经播放就不再执行 touch 事件,避免频繁调用 play 有些安卓浏览器无法自动播放,touch 事件也无法触发播放 video 标签的 play 方法返回一个...我:"设计小哥哥,这我无能为力 设计: "找出所有对应的机型和浏览器,对这些不支持的浏览器使用兼容模式播放动画 我:"这所有的机型实在难以控制和全部覆盖到...

    2.4K10

    HTML多行代码搞定微信8.0的炸裂特效!CC++怎么能输「建议收藏」

    lottie 是 Airbnb 出品的、全平台(Web、Android、IOS、React Native)的动画库,它的特点在于能够直接播放使用 Adobe After Effects 制作的动画。...创建一个 lottie 的容器,使用 span 元素,因为 lottie 动画的播放器需要挂载到一个具体的 html 元素中。...设置表情动画的宽高为 40px。 使用 lottie 加载动画,并设置循环播放为 false,自动播放为 true,来让表情发送时自动播放动画,且只播放一次。...800 毫秒之后再执行,目的是在炸弹表情播放到合适的时间时,再播放全屏动画,播放动画使用了 playExplosion() 函数,并传递了消息元素进去。...之后给 lottie 实例设置事件监听:”complete”,它会在动画执行完成时触发,里边销毁了 lottie 实例和全屏动画元素。 这样全屏动画的效果就实现了。

    2.1K20

    lottie系列文章(一):lottie介绍

    类似下面这种一段动画的播放,非常适合使用lottie来做。 ? 但是,给一个课程卡片本身添加动画(如:从右下角到移动到页面中,并逐渐放大的过渡效果),并不适合使用lottie。...Lottie是有airbnb开发和维护,其目前star较多,我司也有不少部门都是使用或者尝试。所以,综合认为:lottie是一种可靠性较高的动画方案。...所以,使用Lottie方案的好处在于: 动画由设计使用专业的动画制作工具Adobe After Effects来实现,使动画实现更加方便,动画效果也更好; 前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量...,lottie-web也提供了一系列的事件,例如: onComplete: 动画播放完成触发 onLoopComplete: 当前循环播放完成触发 onEnterFrame: 播放一帧动画的时候触发 onSegmentStart...: 开始播放一个动画片段的时候触发 总体而言,lottie-web目前提供了丰富的方法和事件,基本可以满足对动画进行控制的需求。

    4.6K32

    说lottie谁是lottie?

    其他常用的动画方案有: Png 序列帧:文件大,可能会在不同屏幕分辨率下失真 SVG 动画:实现成本高,易出现动画还原度低的情况 目前,项目需要经过调研,Lottie 动画是一种具有高可行性的方案。...设计师可以通过 AE 的 Bodymovin 插件将动画导出为 json 文件,然后通过 Lottie 实现动画效果,确保动画的还原度。...lottie实现的动画效果: jcode lottie-web lottie-web 支持多种特性,提供复杂的动画控制和监听功能。...在 unmount 的时候,需要调用该方法 监听事件: 名称 描述 data_ready 加载完 json 动画 complete 播放完成(循环播放下不会触发) loopComplete 当前循环下播放...GIF动图 Lottie动画 jcode react-lottie react-lottie 将 lottie-web 封装成 React 组件,使其更加易于在 React 中使用。

    40320

    使用强大的 AirBnb Lottie 让你的 React APP 炫酷起来

    然而,要制作好看的动画,可能需要大量的工作和大量的代码。 我将向你展示如何使用一个非常强大的React库来制作令人惊叹的、像素完美的动画来增强你的应用程序,而不需要做很多工作。...最重要的是,要找到和使用这些动画,你不需要Adobe After Effects程序。 如何使用 您所需要做的就是使用一个完全免费的资源,称为lottifiles。...这是一个拥有大量免费和付费Lottie动画的网站。 假设我们想要在我们的应用程序中使用一个动画React logo(注意,你可以使用任何可用的动画)。...当我们准备好使用它时,我们可以通过选择Lottie JSON下载动画的JSON文件: 不管你是如何创建React项目的,你都可以把它放在任何你喜欢的文件夹里。...动画的自动播放设置默认为true,这意味着动画会在加载时自动播放。如果你想有条件地运行动画,你可以通过使用一个状态变量将它设置为true或false(如果你想只在动画可见时播放动画)。

    2K20

    深度剖析Lottie动画原理

    导语 本文主要挖掘、弄懂lottie动画背后的原理。lottie动画是如何让30FPS流畅运行?...下面从几个方面对lottie进行剖析: 1、如何实现一个简单lottie动画 用AE(Adobe After Effects)制作动画,结合bodymovin插件把动画导出json文件,网上很多导出案列...3、lottie是如何让30FPS流畅运行? 上面已经把json数据分析清楚,但lottie是如何去运行这些数据,而又能够让AE导出30fps的动画流畅渲染。...一开始我的思考,用60fps去渲染能保证动画更流畅,但是问题来了。假设动画只有30帧,制作的时候整个动画总时间1s。但是用60fps去渲染,用0.5s就完成整个动画播放。...下面是我求知的过程: 那我是不是可以同一帧的属性数据播放各播放2次,也变成了60帧,总时间去到1s。这个不可取,很明显浪费了多出来的帧。 那我把一帧的数据再分开一半,用2帧去完成一帧的数据属性。

    5.8K31

    Lottie 超酷炫动画效果,了解下?

    它是一个 IOS/Android/React Native 本地库,渲染后效果动画实时,允许应用程序使用动画一样容易,因为他们使用静态图像。 ? Lottie 咋集成? 1....还包括动画的坚挺方法;也尝试了一下 pauseAnimation() 和 cancelAnimation(),均可停止动画播放: Lottie 孰优劣?...劣势: 万事万物都有两面性,Lottie 的劣势在于,动画效果不可动态修改样式,这一点很重要,不能直接调整动画的颜色等,依赖于 json 文件;据说有个别的动画兼容性不太好(和尚我并没遇到)...如何缓解劣势: Lottie 难道只是固定的网站上这些样式吗?有些样式很好,但是个别颜色不太合适的动画效果怎么办?...官方提供了 Lottie Editor,可调整各个图层的颜色;还有官方文档 Lottie Doc 方便我们更快速高效的使用 Lottie。 ?

    1.8K31

    Lottie内存泄漏问题的定位与分析

    【一、前言Lottie简介与使用】 1、Lottie简介 Lottie是Airbnb开源的跨平台动画库,支持iOS、Android、React Native 和 Web 等平台。...3、Lottie方案的优点 (1). 动画由设计使用专业的动画制作工具Adobe After Effects来实现,使动画实现更加方便,动画效果也更好,100% 还原。 (2)....使用lottie方案,json文件大小会比gif文件小很多,性能也会更好。 (3). 简单的实现、控制动画的播放,开发效率大大提高。 (4). 可动态配置下发,实时替换动画效果。...问题场景 (录音助手SDK)首页和(输入法)我的页面切换,发现明显的内存增长趋势。 ?...加载动画是异步的,加载完成才会进入播放状态。如果compositionLayer == null 的时候,会加入到task里,没开始播放。 ? 播放开始了running= true; ?

    7.1K30

    UWP 创建动画的极简方式 — LottieUWP

    LottieUWP 概述 Lottie 是 Airbnb 研发团队研发并开源的一套创建和播放动画的方案,可以非常方面的在全平台实现高质量的动画,支持 Android, iOS, Web, UWP。...设计师在 AE (After Effects) 中设计动画,通过 AE 中的 BodyMovin 插件导出为一个 JSON 文件,Lottie SDK 可以直接读取这个 JSON 文件,并通过简单代码控制播放动画...: 我们去掉 LottieAnimationView 的自动播放,改为使用一个 Slider 来控制动画播放进度,动画进度的取值范围是 [0.0, 1.0] 。...作者关于如何提高动画性能也做了提示: 对于没有 masks 或 mettes 的 JSON 文件,性能和内存占用都会很理想,因为不存在 bitmap 的创建过程; 如果有 mattes,2-3 个 bitmap...所以不建议在 RecyclerView 中使用带有 masks 或者 mattes 的 JSON 文件,因为会伴有频繁的创建和销毁过程,动画播放的效果会降低。

    1.5K70

    让我们一起来看看可爱的猫咪吧

    顺藤摸瓜就找到今天的主角:lottie-web 开源动画库 ---- 进入正文… Lottie 动画库 官方文档 它也是机缘巧合下找到的。...介绍: Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库,它解析使用Bodymovin导出为 json 的Adobe After Effects动画,并在移动设备和...然后播放动画就这么简单: var animation = bodymovin.loadAnimation({ container: document.getElementById('lottie')...注意:如果您的动画包含转发器,并且您计划使用同一个动画多次调用 loadAnimation,请在传递对象之前进行深度克隆 path:动画对象的相对路径。...入门就是这么简单,但是最难的地方就是如何弄那个js和json文件,在它的教程中它的json文件称之为Lottie JSON 文件。 好像也只能通过AE进行导出,其他方式,暂且没有找到。

    1.8K40

    大杀器Bodymovin和Lottie:把AE动画转换成HTML5AndroidiOS原生动画

    Airbnb出了移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形式在移动设备上渲染播放。...(上图为FDCon2017上渚薰讲到Lottie时的PPT页面) 经过了一番试验后,我大概摸清了Bodymovin的使用方式。...下面就分步骤总结下Bodymovin的安装和使用,以及导出的动画如何在Web页面上播放。 1. 如果电脑上没有AE的话,需要安装AE CC2014或更高版本。以AE CC2017为例: ?...接下来我们新建一个网页来播放这段动画。...渚薰答道,An的前身就是Flash,它生成出来的H5动画是用js写的(使用CreateJS库),后期修改和维护会更复杂。

    5.8K22

    iOS高质量的动画实现解决方案——Lottie

    iOS高质量的动画实现解决方案——Lottie     真心的认为Lottie是一款十分优秀且实用的动画开发库,不只对于iOS和android原生开发者来说其让复杂动画的实现几乎没有成本,对于设计师来说...本篇博客主要以iOS平台为例,简单介绍和总结Lottie动画库的使用方式。 一、几个有用链接 Lottie官网:https://airbnb.design/lottie/。...LottieFiles是一个在线的测试Lottie动画的网站,并且其上面也提供了许多常用的Lottie动画组件。...二、一个简单的小Demo     先来看一个简单的小例子,我在LottieFiles上找了一个骑行动画的JSON文件,此文件的下载地址如下: https://www.lottiefiles.com/download...将下载的JSON文件添加到iOS项目中,之后就像使用图片一样的来使用它即可,代码如下: #import Lottie/Lottie.h> @interface ViewController () @

    3.4K20

    面向前端的 Lottie & AE 动画手把手入门教学

    本文作者:IMWeb HuQingyang 原文出处:IMWeb社区 未经同意,禁止转载 因为我一直比较关注 Web 领域的设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试...其实对于普通的动效和简单动画, 使用原生代码实现已经足够, Lottie 是为了复杂动画而生的, 下面来看几个 Lottie 实现的几个动画例子: ?...要使用 Lottie, 需要在借助 Bodymovin 插件将动画工程文件从 AE 中导出成 JSON。Lottie 分别为每个平台实现了一套 Player, 只需载入JSON动画文件就可播放。.../index.html, 打开浏览器, 将会看到我们的动画, 是不是非常酷~ 除了能够播放和暂停, Lottie 还为我们提供了更加精细的动画控制方法和事件钩子, 有兴趣的小伙伴参考: GitHub.... http://airbnb.io/lottie/ 本教程的所有源码和AE工程文件都在我的 GitHub: HuQingyang (胡青杨) · GitHub 欢迎关注、交流、拍砖、搞基

    3K50

    Lottie动画秘籍--QQ超清表情大揭秘

    无比流畅的表情背后,是一个完全革新的表情制作技术和一种全新的表情格式--Lottie超清表情。那么什么是超清表情,现在我就带你研究。...Part 2 他山之石:Lottie格式 x 表情动画 想要同时拥有流畅动画资源和手机播放性能,就必须颠覆基于位图的APNG和GIF的表情格式。此时我们发现Lottie动画十分符合我们的需求。...另外通过相同锚点的位移来生成的动画可以产生更流畅的过渡,不会像位图播放那样出现跳变。...| 动画要首尾相连:QQ表情是不断循环播放,所以动画的首尾循环的动画会更加自然流畅。 | 制作Lottie动画:灵活穿插运用上面的设计手法,可给动画带来灵动的感觉。...·功能:制作时只使用下图中Lottie支持的AE功能 ·表达式:Lottie对表达式的支持并不全面,经常失效。

    1.1K40
    领券