ppt转html5 带动画_我复刻了IPhone12这页发布会PPT

c8022d49-ce1f-eb11-8da9-e4434bdf6706.png

cb022d49-ce1f-eb11-8da9-e4434bdf6706.png

今年苹果发布会没有看,但是最近看到三石兄发了一篇关于发布会现场的这页PPT复刻的推文,它介绍的是利用直线辅助的方法来完成。

三石兄相关推文:

iPhone12发布会PPT,你也能做!​mp.weixin.qq.com
cf022d49-ce1f-eb11-8da9-e4434bdf6706.png

那么今天我们主要介绍如何用插件来复刻它。接下来我们将借助islideOK以及PA口袋动画三个插件来实现它。

首先我们来看一下它动态的完整效果

d2022d49-ce1f-eb11-8da9-e4434bdf6706.png

观察这一页PPT,我们可以发现难点主要是在于中间的动态进度条和动态数据。那么这个动态进度条和动态数据有没有方便的方法来做呢?

关于这个动态数据滚动的做法,我们前面推文有讲过,利用OK插件一键生成。我们再来复习一下操作

1.滚动数据动画

1)先纵向打出一列随机数字

d4022d49-ce1f-eb11-8da9-e4434bdf6706.png

2)通过OK插件“文档组-逐帧相关-逐帧辅助-设置行间距为固定值0磅”,再对文本添加逐帧闪烁,设置对应参数即可。

d7022d49-ce1f-eb11-8da9-e4434bdf6706.png

3)在滚动数据末尾为最后停留的数据,添加出现动画。

d9022d49-ce1f-eb11-8da9-e4434bdf6706.png

2.半封闭式圆环进度条

接下来观察我们这个由圆点组成的半封闭圆环式进度条,我们发现它包含了以下图示的基础属性的变化,那么我们就可以利用插件对应的功能来制作这个圆环进度条

db022d49-ce1f-eb11-8da9-e4434bdf6706.png


1)插入正圆形,对圆形执行“环形布局”。

dc022d49-ce1f-eb11-8da9-e4434bdf6706.png

动态操作演示如下

de022d49-ce1f-eb11-8da9-e4434bdf6706.png

最后删除掉多余部分,即可

e0022d49-ce1f-eb11-8da9-e4434bdf6706.png

2)通过“OK神框-填充透明递进”设置它的递进透明填充属性。

e1022d49-ce1f-eb11-8da9-e4434bdf6706.png

OK神框“填充透明递进”使用方法,在这里简单说明一下,在框内输入合适的数值,中间用逗号隔开,然后回车即可。

如下图所示,在框内输入“10,0”,表示的是对象填充颜色的透明度呈10%到0%的透明度变化

e4022d49-ce1f-eb11-8da9-e4434bdf6706.png

这里我设置的是20%-0%的透明度的变化,这个参数可以根据自己需要来设置。

动态演示如下

e8022d49-ce1f-eb11-8da9-e4434bdf6706.png

3)通过“OK神框-尺寸比例递进”对设置它的大小递进。

跟前面讲的方法一样,我们只需要在神框内插入合适的数值,用逗号隔开,然后回车即可。这里我设置的是“80,100”,即尺寸大小比例呈80%-100%递进变化

下面我们直接上动图演示

e9022d49-ce1f-eb11-8da9-e4434bdf6706.png

3.进度条动画设置

我们可以看到进度条好像是一个旋转出现的这么一个效果,其中还伴随着一个大圆点进行变化的。

我们可以将圆环分为2等分,然后组合起来,分别用“向上”“向下”两个方向的擦除出现动画来做这个类似的效果。

eb022d49-ce1f-eb11-8da9-e4434bdf6706.png

动态操作演示如下

ee022d49-ce1f-eb11-8da9-e4434bdf6706.png

速度有点慢,后面我们还可以将擦除速度再调快一点。

接着是外面的大圆点的伴随路径动画的设置,我们可以先复制一个圆点出来,然后利用PA口袋动画插件的“形状转路径”即可得到圆点的伴随路径动画。

这里我们先用布尔运算和编辑顶点,得到一个与半封闭圆环等大的半封闭圆线框,作为圆点的伴随路径。

f1022d49-ce1f-eb11-8da9-e4434bdf6706.png

这里也简单地说明一下,“形状转路径”的使用方法。先选中小圆点,然后选择口袋动画的插件的“形状转路径”,等到半封闭线框变红的时候,用鼠标轻轻点击一下这个线框,这个圆点就可以沿着这个线框做路径运动。简单来说,“形状转路径”功能,就是相当于我可以在PPT中随意给它画线条,那么通过这个功能,就可以让任意对象沿着所画线条进行路径运动。

下面请看动态演示操作

f4022d49-ce1f-eb11-8da9-e4434bdf6706.png

现在我们已经将圆点的路径动画设置好了,现在我们可以打开动画窗格对它进行一些参数调整。

f8022d49-ce1f-eb11-8da9-e4434bdf6706.png

最终放上文字和前面做的动态滚动数据的效果

f9022d49-ce1f-eb11-8da9-e4434bdf6706.png

其实很多时候方法是可以迁移使用的,那么由这个圆环式动态进度条,我们还可以延申得到下面这些动态进度条

fa022d49-ce1f-eb11-8da9-e4434bdf6706.png

fd022d49-ce1f-eb11-8da9-e4434bdf6706.png

ff022d49-ce1f-eb11-8da9-e4434bdf6706.png

以上就是今天要分享给大家的内容了,希望大家喜欢!

老规矩,在微信公众号后台回复“动态数据进度条”就即可下载以上动态数据进度条的PPT源文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tablemodel dapter区别

2019独角兽企业重金招聘Python工程师标准>>> 简单的原则: 如果查询部分字段用adapter 如果多表查询用adapter 如果考虑sql注入用adapter 如果增加、删除、修改、查询单个表的全部字段用tablemodel 转载于:https://my.oschina.net/shunshun/blog/92668

安卓短信加密_发短信控制车辆!苹果发布ios14,手机可作车钥匙

1.苹果宣布今后iPhone和Apple Watch可以作为开启和启动车辆的数字钥匙;2.支持该系统的第一款汽车将会是宝马5系;3.“车钥匙”功能将于下月推送,iOS13上也可使用;4.车主可以通过Apple的iMessage短信应用程序与其他五个人共享密钥&a…

ubuntu14测试mysql_在ubuntu14.04中安装Hammerora-2.10——测试mysql、oracle性能够的工具...

Hammerora—The Open Source Oracle Load Test Tool首先介绍一下Hammerora,从创作者对这个工具的标题描述可以看出,Hammerora是一款Oracle数据库负载测试工具。该工具可以在Oracle 8i、9i和10g等版本上使用。当前可以用在Linux/Unix和Windows上。初步实现…

哇嘎显示等待无服务器,vagaa搜索不到资源怎么回事?vagaa哇嘎搜索没反应的解决方法...

vagaa哇嘎是一款资源搜索神器,使用非常的简单,但是有网友反映,使用vagaa哇嘎搜索不到东西了,这是怎么回事,如果点击vagaa搜索没反应可能是搜索的问题,也可能是其他问题,一起来看看具体的解决方法…

内存四区(代码区 静态区 栈区 堆区)

参考:内存四区(代码区 静态区 栈区 堆区) 作者:今天天气眞好 发布时间: 2021-04-01 18:09:13 网址:https://blog.csdn.net/qq_51118175/article/details/115379779?spm1001.2014.3001.5501 内存相关博文&a…

webpack4 入门配置研究

1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir config dist src创建三个文件夹 3.输入命令npm init -y 4. 输入命令touch dist/index.html src/…

王者荣耀6月23服务器维护,王者荣耀6.23维护到什么时候?6月23日长枪掠火版本异常介绍...

王者荣耀6.23维护到什么时候?可能很多玩家对于今天更新的时间还不太清楚,下面就让浏览器小编为大家带来,王者荣耀6月23日长枪掠火版本异常介绍。亲爱的召唤师: “长枪掠火”版本更新后,我们收到反馈,本次在…

采样频率和带宽的关系_基于矢量网络分析仪的 TDR 与传统采样示波器 TDR 之间的测量性能和优势比较...

最近几年随着多 Gbps 传输的普及,数字通信标准的比特率也在迅速提升。比特率的提高使得在传统数字系统中不曾见过的问题显现了出来。诸如反射和损耗的问题会造成数字信号失真,导致出现误码。另外由于保证器件正确工作的可接受时间裕量不断减少&#xff0…

mysql的分片系统_MySQL分片

shardingMySQL5以后提供了Sharding的能力,其目的就是为突破单节点数据服务器I/O能力限制,解决数据库Scale Out水平扩展的问题。通过Sharding可以将数据按照物理位置贴合用户分布,得到更加快速的响应;操作庞然大物总是让人头疼&…

在线普通话转粤语发音_香港最新悬疑侦探剧福尔摩师奶,粤语知识好难

150元系统学粤语付费咨询微信2019年2月25日香港TVB上了一部新剧《福尔摩师奶》,该剧以19世纪末至20世纪初的油麻地为背景,讲述一个女探长祖迪费查(陈松伶饰)破案的故事。/ 盏鬼 // 识少少 /①普通话的“嫉妒、受不了”,粤语会说:唔…

Java web小项目_个人主页(1)—— 云环境搭建与项目部署

摘自:Java web小项目_个人主页(1)—— 云环境搭建与项目部署 作者:丶PURSUING 发布时间: 2021-03-26 23:59:39 网址:https://blog.csdn.net/weixin_44742824/article/details/115104493?spm1001.2014.3001…

网页搜索怎么显示排名_深圳seo搜索排名优化效果怎么样

效果怎么样l31b10seo搜索排名优化深圳,企业商家为了自己的网站有更好的排名,获得更好的流量,往往会采用SEO优化,那么SEO优化有哪些方法呢?或者是哪些方法更有效呢?这是一个多媒体的时代,内容元素…

实战 Lucene,第 1 部分: 初识 Lucene

Lucene 简介 Lucene 是一个基于 Java 的全文信息检索工具包,它不是一个完整的搜索应用程序,而是为你的应用程序提供索引和搜索功能。Lucene 目前是 Apache Jakarta 家族中的一个开源项目。也是目前最为流行的基于 Java 开源全文检索工具包。 目前已经有很…

Java web小项目_个人主页(2)—— 边缘加速原理与实现

摘自:Java web小项目_个人主页(2)—— 边缘加速原理与实现 作者:丶PURSUING 发布时间: 2021-03-27 14:44:40 网址:https://blog.csdn.net/weixin_44742824/article/details/115260283?spm1001.2014.3001.5…

mysql 双从性能_MySQL双主一致性架构优化

转自:MySQL双主一致性架构优化 - osc_avwazwuz的个人空间 - OSCHINA​my.oschina.net一、双主保证高可用MySQL数据库集群常使用一主多从,主从同步,读写分离的方式来扩充数据库的读性能,保证读库的高可用,但此时写库仍然…

最清晰细致的教程!一步步教你打造Win7+CentOS双系统

大概半年前自学了一段时间Linux,但没有坚持下来……最近又想开始看,但是希望看到Linux在物理机下的运行情况而不是仅仅在虚拟机下运行,所以尝试着在已经安装了Win7的系统下安装CentOS,实现双系统切换使用的目的。经过大半天的实验…

全国计算机等级考试题库二级C操作题100套(第01套)

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

linux系统日志_如何使用 Linux Cockpit 来管理系统性能 | Linux 中国

Linux Cockpit 是一个基于 Web 界面的应用,它提供了对系统的图形化管理。看下它能够控制哪些。-- Sandra Henry-stocker如果你还没有尝试过相对较新的 Linux Cockpit,你可能会对它所能做的一切感到惊讶。它是一个用户友好的基于 web 的控制台&#xff0c…

使用randomaccessfile类将一个文本文件中的内容逆序输出_Java IO2:RandomAccessFile

RandomAccessFileRandomAccessFile类可以说是Java语言中功能最为丰富的文件访问类,它提供了众多的文件访问方法。RandomAccessFile类支持"随机访问"方式,可以跳转到文件的任意位置处读写数据。要访问一个文件的时候,不想把文件从头…

JavaScript可否多线程? 深入理解JavaScript定时机制

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法…