复习Animate和木疙瘩学习笔记-动画制作的回家之路

这个融媒体H5制作平台功能比较完善:包含了Flash(现在叫Animate)+传统H5网页制作+ 720全景视频制作+发布网页!

主要功能:素材导入、2D动画制作、常见交互添加、发布生成链接二维码

基本就是一个制作H5为主,但是里面的动画可以依赖4种方式完成!(类似PPT动画+Flash动画)

交互部分:

完全依靠傻瓜式的行为添加完成,任何一个元素都可以添加行为。这些行为基本都是封装好的,让用户0代码完成交互制作。

本文主要记录一下动画部分: 

学过 Flash(现在叫Animate)的同学、以及PPT动画的,恭喜,这个平台几乎完全模仿了他们!5种方式完成动画

1.内置的一键动画(和PPT一样)

2.时间轴手动动画(和Flash一模一样)

  1. 进度动画
  2. 变形动画
  3. 关键帧动画
  1. 关键帧动画:关键帧动画是一种通过设定动画的起始和结束两个关键帧,然后通过软件自动生成动画过程的动画形式,主要是对元素右边的属性进行变化的动画。它默认是匀速运动,但Mugeda(木疙瘩)可以设定不同的运动模式,比如淡入、淡出、阻尼进入、阻尼退出等。关键帧动画在时间轴上显示为绿色,并且会自动编组。
  2. 进度动画:进度动画可以实现绘制线条过程的效果和文字的打字机效果。它在时间轴上显示为粉色,可以做元素的生长动画,但是元素需要在木疙瘩中绘制,且在时间轴上只有一个关键帧,延时帧多长,动画播放时长就多长。
  3. 变形动画:曲线变形动画可以实现一个形状变成另一个形状的动画效果,它也可以做元素形状和颜色改变的动画,但是元素必须是木疙瘩中绘制的。它在时间轴上显示为黄色。

 注意:该平台中内置动画和时间轴动画不可以同时在一个元素上(素材)去使用!

 注意:该平台中内置动画和时间轴动画不可以同时在一个元素上(素材)去使用!

 注意:该平台中内置动画和时间轴动画不可以同时在一个元素上(素材)去使用!

 注意:该平台中内置动画和时间轴动画不可以同时在一个元素上(素材)去使用!

时间轴动画的三种也不能同时在一个层上使用,每一个元素还是一样需要先选中关键帧才可以添加素材,因为对于时间轴动画来说,任何一个场景元素都需要在某个图层的某个关键帧上!

首先看第一种:内置的一键动画

选中元素,右上角点击星星图标,选择喜欢的动画即可!一旦添加就不允许使用时间轴动画了!

二、时间轴动画

1.进度动画

这种动画就是一种路径生长动画,主要面向软件自己绘制的图形的路径来生长的!还有文字可以实现打字机效果。

首先打一个文字或者画一个路径在时间轴的第一帧关键帧上!

然后选中后面任意帧点击右键选择插入进度动画

 点击播放

如果想要停留就在结尾帧点右键插入关键帧!完毕!

2.变形动画

这和flash的补件形状一样!元素的像素进行变形!比如从方块变成球!

补件形状不能是对元件的操作,必须是原生的形状图!

这种形状图都是软件内部绘制的矢量图,不可能是外部导入的,因为外部导入的都不是矢量!

在Flash(Animate)中元件是对一个素材的封装!元件不允许制作所谓的“补间动画”或者形状动画!元件只能做传统补间和补间动画,如下图:

 

 

3.关键帧动画

木疙瘩中的关键帧动画就类似Flash的传统补间动画!

主要实现参数的变换(移动、旋转、缩放)动画!以及任何属性参数的动画!

4.路径动画制作

在木疙瘩中路径动画是在关键帧动画完成后的基础上,右键点击元素当前关键帧!

 选择显示路径!然后选择节点工具,去修改路径形!

这一部分的动画对应了Flash中的【补间动画】

PS:木疙瘩中如何改变锚点位置

首先选中素材,点击到变形工具(Q)然后安装Ctrl 键,鼠标拖动中间的绿色锚点即可!

谈一下AN中补间动画和传统补间动画、形状补间的区别!

首先他们两个都是面向元件的、外部素材的!这是区别于用来变形的形状补间!在没有软件之前,动画都是手绘的,一秒24帧需要用拷贝台画24张不同的图!构成序列动画!比如宫崎骏的!形状补间其实就是为了提高传统的帧动画效率诞生的!可以快速变形,是像素级别的重新绘制!

后来有了软件以后!开始创作数字动画了,所谓数字动画就是软件把一些能参数化的动作全部参数化,比如位置、旋转、缩放、以及一些复杂的效果(effect),现在所以动画软件都是拼命参数化比如AE\3DMAX\MAYA\Unity!

传统补间动画和补间动画就是简单的参数动画(比如位置 1     100,中间补充 1慢慢到100)!传统补间动画更直接,就是参数填充!

他们两个的区别就是补间动画(新)更容易控制速度!以及更容易制作连续动作动画!

传统补间仍然依赖两个关键帧!下图是一个补间动画!便于调节路径和速度!

 【后更持关】

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣第738题 单调递增的数字 c++ 暴力超时 贪心优化

题目 738. 单调递增的数字 中等 相关标签 贪心 数学 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 1…

【DevChat】智能编程助手 - 使用评测

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…

操作系统运行机制

文章目录 操作系统运行机制特权指令VS非特权指令内核态VS用户态中断和异常内中断(异常)外中断中断机制基本原理中断处理过程 系统调用系统调用和库函数的区别为什系统调用时必须的&#xff1f;什么功能需要用到系统调用系统调用的过程小结 操作系统内核 操作系统运行机制 特权…

Java 四种引用类型

文章目录 前言一、整体架构二、强引用&#xff08;Reference&#xff09;三、软引用&#xff08;SoftReference&#xff09;四、弱引用&#xff08;WeakReference&#xff09;五、虚引用&#xff08;PhantomReference&#xff09;六、引用队列&#xff08;ReferenceQueue&#…

React Hooks 实战案例

文章目录 一、React Hooks 简介二、React Hooks 的基本用法1. 使用 useState 创建状态2. 使用 useEffect 添加副作用 三、React Hooks 的常见问题1. 循环引用问题2. 副作用问题 四、React Hooks 实战案例1. 使用 useReducer 和 Redux&#xff1a;2. 使用 useContext&#xff1a…

如何使用drawio画流程图以及导入导出

画一个基本的流程图 你可以在线使用drawio, 或者drawon创建很多不同类型的图表。 如何使用编辑器&#xff0c;让我们以一个最基本的流程图开始。 流程图&#xff0c;就是让你可视化的描述一个过程或者系统。 图形和很少部分的文字表达就可以让读者很快的理解他们需要什么。 创…

07、SpringCloud -- jmeter 压测

目录 jmeter 入门jmeter 安装测试步骤测试数据模拟多用户操作1、创建http请求2、添加http cookie 管理器3、并发获取当前登录用户数据的效果4、添加多个用户模拟并发请求5、访问方法6、jmeter添加 CSV Data Set Config7、高并发执行访问的效果8、总结流程高并发秒杀压测jmeter …

Python 日期和时间处理教程:datetime 模块的使用

Python 中的日期不是独立的数据类型&#xff0c;但我们可以导入一个名为 datetime 的模块来使用日期作为日期对象。 示例&#xff1a;导入 datetime 模块并显示当前日期&#xff1a; import datetimex datetime.datetime.now() print(x)日期输出 当我们执行上面示例中的代码…

springboot web项目中 Set-Cookie 失败 办法

1. 背景 目前有个项目 线上环境 使用spring session管理的登录 项目中有两个接口 一个用来登录的 登录成功后会设置cookie 后续请求就会使用该cookie &#xff08;cookie的键值就是session Id 和 登录后的信息 例如菜单&#xff0c;权限等&#xff09; 一个用来检查是否登录…

LeetCode热题100 旋转图像

题目描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9…

2022年06月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 运行下列程序&#xff0c;输出的结果是&#xff1f;&#xff08; &#xff09; tup1 (苏炳添, 谷爱凌, 北京冬奥会, …

VSCode编写Unity代码自动补全配置

1.下载并安装.NET 7.0&#xff08;C#插件需要&#xff09;和.NET Framework 4.7.1&#xff08;Unity需要&#xff09; .NET 7.0下载链接&#xff1a;https://dotnet.microsoft.com/en-us/download .NET Framework 4.7.1下载链接&#xff1a;https://dotnet.microsoft.com/en-…

cmd基本命令

一、cmd黑框是什么 cmd 是 Windows 命令提示符&#xff08;cmd.exe&#xff09;是 Windows NT 及以后的 Windows 系统下的一个用于运行 Windows 控制面板程序或某些 DOS 程序的shell程序&#xff1b;或在 Windows CE 下只用于运行控制面板程序的外壳程序。 二、打开步骤 wind…

H5游戏源码分享-命悬一线

H5游戏源码分享-命悬一线 在合适的时机跳下绳子&#xff0c;能安全站到木桩上&#xff0c;就通过。 游戏源码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta name&…

多线程---阻塞队列+生产者消费者模型

文章目录 阻塞队列自己实现一个阻塞队列&#xff08;三步&#xff09;标准库中的阻塞队列使用阻塞队列的优势 生产者消费者模型 阻塞队列 队列&#xff08;Queue&#xff09;是我们熟悉的一个数据结构&#xff0c;它是“先进先出”的。但是并不是所有的队列都是“先进先出”的…

RocketMq源码分析(八)--消息消费流程

文章目录 一、消息消费实现二、消息消费过程1、消息拉取2、消息消费1&#xff09;提交消费请求2&#xff09;消费消息 一、消息消费实现 消息消费有2种实现&#xff0c;分别为&#xff1a;并发消费实现&#xff08;ConsumeMessageConcurrentlyService&#xff09;和顺序消费实现…

pre-existing shared memory block

发生原因: 1.服务器cpu、内存进行扩容 2.非正常关闭,导致任在占用共享内存段 解决方案: 根据shmid进行关闭 ipcs -mipcrm -m xxx

Kotlin协程核心理解

一、协程是什么&#xff1f; 1.1 基本概念的理解 我们知道JVM中的线程的实现是依赖其运行的操作系统决定的&#xff0c;JVM只是在上层进行了API的封装&#xff0c;包含常见的有线程的启动方法&#xff0c;状态的管理&#xff0c;比如&#xff1a;Java中抽象出了6种状态&#x…

windows8080端口占用

查看端口占用 netstat -ano | findstr “8080”查看占用进程 tasklist | findstr “4664”关闭占用进程 taskkill /f /t /im httpd.exe

读图数据库实战笔记03_遍历

1. Gremlin Server只将数据存储在内存中 1.1. 如果停止Gremlin Server&#xff0c;将丢失数据库里的所有数据 2. 概念 2.1. 遍历&#xff08;动词&#xff09; 2.1.1. 当在图数据库中导航时&#xff0c;从顶点到边或从边到顶点的移动过程 2.1.2. 类似于在关系数据库中的查…