美文网首页PPT动画PPT
改变对象的中心点

改变对象的中心点

作者: 花道PPT | 来源:发表于2017-03-14 14:50 被阅读88次

什么是对象的中心点?为什么要改变对象的中心点?改完之后又有什么动画效果呢?下面花道给出自己总结的一些想法。

注:文末有小花花的弹唱臭美哦,啊哈哈!


1、 什么是对象的中心点?

在PPT中,任何对象(包括文字,形状,图片),当你单击选中它时,会看到由8个点组成的一个矩形轮廓(见下图),拖动任意一点可以改变对象的大小。

所谓对象的中心点,就是这个矩形轮廓的中心点(两条红线相交的点),而改变对象的中心点,本质上就是改变对象最外层轮廓的大小。


2、 如何确定对象的中心点?

一是跟刚才一样,采用画辅助线的方法,两条红线的交点就是中心点。画辅助线的过程,可以手动与原对象对齐,也可以采用水平居中对齐和垂直居中对齐。

二是给对象添加一个直线路径动画,路径的起点即为对象的中心点。


3、 如何改变对象的中心点?改完之后可以有什么动画效果呢?

本篇就以下面的矩形(其中心点为O点)为例,说一下花道常用的三种改变对象中心点的方法。


(1) 复制法

如果我给刚才的矩形添加一个强调动画——放大/缩小——0%,会看到三角形是以O点为基准缩小的。

现在我想把矩形的中心点改为D点

操作如下:

首先复制出一个矩形,然后将其移动到原矩形的正下方,无缝拼接,并选中两个矩形,右击——组合。

接着将组合1中,副本矩形的填充和边框均设置为 无。

这时便可以发现,原矩形实际上是被组合1替代了,由于副本的填充和边框均为无,所以视觉上看起来,组合1就是原来的矩形。

因此原矩形的中心点就这样变成了组合1的中心点D点。(见下图)

这时我给组合1添加与原矩形 同样的动画,对比两个效果。

可以发现,矩形是变成了以D点为基准缩小。

如果将缩放效果改为如下设置,

就会有这样的效果

再加几个矩形,调整时间延迟和动画重复次数,就可以作成音乐跳动的感觉

通过修改缩放的方向(垂直和水平)和持续时间,可以做出好多效果,比如烛火

再比如,配合陀螺旋和缩放动画,模拟小鸟的翅膀

也可以作成转场动画


(2) 矩形法

还是对下面的矩形,为其添加强调动画——陀螺旋

可以看到其围绕原来的中心点O点旋转。

现在我想让它围绕E点旋转。

首先画出辅助线确定E点的位置,然后画出一个矩形,拖动使其中心点与E点重合。

接下来,按住Ctrl+Shift,拖动红色的矩形轮廓点,使之等比放大到可以将原来的矩形包含。

然后选中两个矩形,组合为一个对象(快捷键 Ctrl+G),将红色矩形的填充和边框均设为 无,完成。

同样的,为组合后的对象添加与原矩形相同的动画,看一下效果

可以看到,原矩形绕着E点旋转(实际上是最外层的轮廓在旋转),哈哈,就这么简单!再来几个效果


(3) 阴影法

现在我要把矩形的中心点改为M点。

为矩形添加阴影,并作如下设置,然后将阴影的透明度设为100%

然后给矩形添加进入动画——形状——菱形,就可以实现斜方向擦除啦!

以此类推,把中心点改到不同的角上,就会有不同方向的擦除!

而且,其他的许多自定义动画都可以通过改变中心点产生多样的效果

是不是很神奇!改变对象的中心点,可以使原来的基础动画衍生出更多的效果。再来几个实例


结语:

总的来说,三种办法本质上都是通过改变最外层的轮廓,并隐藏不需要的部分,从而“看起来”改变了对象的中心点,由此可以做出不同的的动画效果。

有没有心痒痒,要不要动手试试?哈哈,最后再来个文字版的。

阅读原文


眼睛有没有花?大脑有没有乱?哈哈

小花花献丑给大家弹唱一首wonderful tonight,放松放松。


吉他弹唱 wonderful tonight

相关文章

  • 改变对象的中心点

    什么是对象的中心点?为什么要改变对象的中心点?改完之后又有什么动画效果呢?下面花道给出自己总结的一些想法。 注:文...

  • Swift心得之UI篇(二)

    UIView的坐标相关 创建一个UIView的对象 centre属性 简单来说center就是视图的中心点,改变c...

  • 动效周期表学习笔记

    NO.01 偏移旋转系:轨道 1、可以改变 锚点 位置,而不改变图形的 中心点(位置) 2、旋转:time*90:...

  • quasar上高德地图vue-amap组件应用攻略:进阶篇

    一、设置中心点 设置中心点是通过map类的setCenter(中心点坐标)、setZoomAndCenter(缩放...

  • Postgis

    点 更新几何对象中心点 多边形 面积 点间距离(米) 类型 多边形内随机取点

  • CSS-变形transform

    2D变形 transform-origin可以改变旋转的中心点,两种方式transform-origin:left...

  • 原生JavaScript对象复制

    简单深度复制 对象合并或者称为浅复制(对象只是复制应用,原对象改变会影响新对象,新对象改变不会影响原来的对象) 高...

  • css3过渡和2D

    过度 过渡三要素1:需要有属性发生改变2:哪个属性需要发生改变3:过渡持续的时间 手风琴菜单 2D转换和形变中心点...

  • 半圆扇子增长效果

    先看效果: 实现思路: 自定义View,确定圆心中心点的坐标,利用canvas.drawArc方法画圆弧,来改变半...

  • CGContextAddArc 和 CGContextAddAr

    中心点右侧: 弧度为 0中心点下方: 弧度为 M_PI_2中心点左侧: 弧度为 M_PI中心点上方: 弧度为 -M...

网友评论

  • 樱木1222:这个我读懂了
    花道PPT: @樱木1222 很有潜力!进步神速!
  • P酒瓶:很赞
  • Clquan:文章写的很有逻辑性~ 不过貌似结语之前的倒数第二句“只要改变中心点,就可以收到不同的效果”是错别字?感觉有点不通顺:no_mouth:
    Clquan:@花道PPT 好的:smiley:
    花道PPT:嗯嗯,修改了一下。:grin:

本文标题:改变对象的中心点

本文链接:https://www.haomeiwen.com/subject/uiqhnttx.html