时间轴动画怎么加才惊艳?简单,腾讯御用PPT设计师直接爆料

boyanx6个月前技术教程25

大家应该收集或者见过很多不错的时间轴的页面设计吧?

时间轴算是PPT制作中经常遇到的页面类型,个人述职、项目路演、企业介绍等等,都会用到时间轴来让用户更加直观地了解个人或公司

比如腾讯的时间轴页:

又比如高通的时间轴页:

那你,知道时间轴这种PPT页面,适合添加什么样的动画效果吗?今天的这篇文章直接告诉你三种让时间轴更出彩的动画效果!

文末还分享了超多适合作时间轴背景图的图片素材,大家记得转发+关注!


1、加入路径动画

我们使用曲线来代替常用的直线时间轴,然后在用曲线工具在页面的底部绘制一些波纹,如下图:

除此之外呢,为底部的波浪形状加上路径动画,我们来看一下效果:

如果觉得路径动画太难,那我给大家推荐一个在线曲线生成网站:挥手

这个网站能够随机生成波浪形状!也支持下载SVG格式的矢量图形,下载后只需要直接导入PPT就能实现自由编辑!


这页问题很明显,版式不均衡,右侧留有大面积空白,

也许你会觉得,这页面也太简单了,那就用动效来弥补吧!


2、依次浮现

先看PPT的原稿页面,这种阶梯样式的排版可能是很多人喜欢的版式:

但是这一页存在着明显的问题,文本栏宽过窄,以及页面阶梯颜色过多,会干扰视线:

对于这种时间节点多的页面,我们可以使用上下错位的排版方式:

上下错位的排版更能充分利用PPT页面内的空间,同时将直线换成有上升趋势的曲线,就又能体现企业的发展势头:

最后让信息依次浮现:

同理,再举一个例子,大家看这种动画,按照从左向右的顺序,既符合时间顺序,又能体现发展劲头:


3、推入

这又是PPT自带的一个很实用的效果:

这个效果用在时间轴页简直就是绝配。我举几个例子大家就能明白了~

这是高通的时间轴页面,前后两页有十分明显的递进关系:

我们在第二页加上推入效果:

这个案例里面推入效果,是自右侧。这个金典的案例也是同样的方法:

那么能不能实现上下推入呢?当然可以!

纵向的推入,我需要强调一点:前后两页的衔接处不能有偏差!!

到这里,这三个时候时间轴页面的动画效果你学会了吗?

最后呢,我搜集了很多适合做时间轴页面的背景图:

只需要你关注我+发送关键词【时间轴】即可获取!

标签: svg路径动画

相关文章

零基础教你学前端——47、SVG绘制路径

在SVG中,使用 path 标签来定义一个路径。它是一个单标签,基本语法为:尖角号 path,斜线尖角号。应用路径,我们可以绘制任意形状的图形。path标签的重要属性 d,用来定义绘制路径的命令,d...

交互设计师做好动画后,提交给开发的文档有哪些?

谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...

学下SVG矢量图形,你也是个小小艺术家!

SVG 全面教程1. SVG 简介SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,可以在不损失质量的情况下任意缩放。2. 基础语法<svg width=...

SVG交互图文|推送里的路径动画是怎么做到的?

线条自主移动变化构成画面,这种炫酷的路径动画特效,相信大家都见过。下面从业内首发SVG路径动画交互图文为案例,为大家分析一波。这是由「小编备用」于2019年5月交付于宝马的《你以为这只是一条线》从推文...

Popmotion – 小巧,灵活的 JS 运动引擎

Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...

粒子Logo动画教程

本教程将引导你使用Blender的Geometry Nodes创建一个引人注目的粒子Logo动画。整个教程实现的基本原理如下:导入Logo:首先,将你的Logo(最好是SVG格式)导入Blender,...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。