CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果


上一篇,我们介绍了动画编辑器相关功能面板说明,感兴趣的朋友可以前往阅读: CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明。


熟悉了动画编辑器的基础操作,那么再使用动画编辑器制作动画就比较简单了。


今天,我们来介绍动画编辑器实操案例,以关键帧动画实现动态水印效果。


在进行实操之前,我们需要知道什么是关键帧?如何使用关键帧?


一、关键帧的概念


在了解关键帧之前,我们需要先了解一个概念-什么是帧?


1、什么是帧?

帧就是动画中最小单位的单幅画面,相当于电影胶片上的每一格镜头,在动画编辑器的时间轴上,帧表现为一格或一个标记。


如下图所示:

时间控制线处为第10帧,往前面数,有10个格子,每一个为1帧。


在这里插入图片描述


2、什么是关键帧?

关键帧-顾名思义,指物体变化或者运动过程中,关键动作所处的那一帧,它对制作更加精细的动画效果起到非常关键的作用,是动画或者视频制作中经常用到的一个功能。


例如:下图 第 1 ,4,9 帧均为关键帧。

在这里插入图片描述


二、关键帧的使用


1、添加关键帧

添加关键帧的方法有很多种:

  • 选中动画属性,使用快捷键 K,将会在在时间控制线所在位置添加关键帧。

    例如下图:

    我们选择 Label-001节点 的属性 postion ,然后在时间控制线 第10帧的位置,按下快捷键k ,即添加了关键帧。


在这里插入图片描述


  • 移动时间控制线到需要添加关键帧的位置,点击动画属性右侧关键帧按钮,即可在当前动画属性轨道上添加关键帧。

如下图,我们将时间控制线移动到第8帧的位置,然后按下属性 postion 右侧的 菱形按钮:

在这里插入图片描述


也添加了关键帧:

在这里插入图片描述


  • 在动画属性的属性轨道中,右键点击需要添加关键帧的位置,在弹出的菜单中选择 添加关键帧

    如图:

    在第7帧的位置,右键弹出菜单,选择添加关键帧。

在这里插入图片描述


2、选中关键帧

选中的关键帧会由白色变成蓝色,有以下几种方法可以选中关键帧:

  • 单击动画属性轨道上的关键帧即可选中

在这里插入图片描述


  • 双击关键帧,则会在选中关键帧的同时,将时间控制线移动到当前关键帧所在位置

在这里插入图片描述


  • 支持多选关键帧,按住ctrl 再选择多个关键帧、框选多个关键帧

在这里插入图片描述


选择动画属性后,按住ctrl+a 可全选关键帧:

在这里插入图片描述


3、移动关键帧

在选中关键帧的同时拖动,即可将关键帧移动到想要的位置。

  • 当拖动单个关键帧时,关键帧下方会出现一个白色小方框,显示移动过程中的帧数以及移动的距离。

​ 如下图,选中第4帧这个关键帧,拖动到第 14帧的位置:

在这里插入图片描述


  • 当拖动多个关键帧时,方框左右两侧会分别显示移动过程中首尾关键帧在动画时间轴中的帧数。

在这里插入图片描述


4、缩放关键帧

选中多个关键帧时,首尾关键帧会显示两条控制辅助杆,拖动任意一个控制杆移动即可对选中的关键帧进行整体缩放。

在这里插入图片描述


如图,往后拉控制辅助杆,将其放大到第17帧。

在这里插入图片描述


5、间隔排列关键帧

选中多个关键帧后,点击上方菜单栏中的间隔排列关键帧按钮,选中的关键帧便会以第一个关键帧为基准,以间隔数输入框中设置的数值为间隔帧数依次排列。


在这里插入图片描述


6、复制粘贴关键帧

关键帧数据的复制和粘贴方法:

  • 选中关键帧后(可多选),使用快捷键 Ctrl + C 和 Ctrl + V 即可进行复制粘贴。需要注意的是快捷键粘贴的位置将会以当前时间控制线所在的位置为起点。

如图,选择了第9 、10 、11关键帧,按下 Ctrl + C ,然后在 第15帧控制线处,再按下 Ctrl + V,实现的效果:

在这里插入图片描述


  • 选中关键帧后(可多选),右键点击(任一)关键帧,在弹出的菜单中选择 复制关键帧,然后在目标动画属性轨道上点击右键,选择 粘贴关键帧 即可在当前动画属性轨道上粘贴关键帧。

在这里插入图片描述


在这里插入图片描述


7、删除关键帧

  • 选中需要删除的关键帧(可多选),按下 Delete 键(Windows)或者 Cmd + Backspace(macOS)即可

  • 选中需要删除的关键帧(可多选),然后点击右键,在弹出的菜单中选择 移除关键帧 即可。

在这里插入图片描述


拖动时间控制线到需要移除的关键帧的位置或者直接 双击 关键帧,然后在动画属性列表中点击对应的动画属性右侧的菱形按钮即可。

在这里插入图片描述


三、实操案例


我们以制作 Label 移动动画,实现动态水印 效果为例进行讲解。

假如我们想实现下面这个动画效果:

文字, 从左上角移动到右上角,然后从右上角移动到右下角,再从右下角移动到左下角,最后再从左下架回到右上角。


第一步,选择Label-001节点,在属性列表中,添加位置属性。

在这里插入图片描述


第二步,在属性事件轴上第0帧处添加关键帧,并在属性检查器中设置位置:(-400,-500)

在这里插入图片描述


第三步,在属性事件轴上第10帧处添加关键帧,并在属性检查器中设置位置:(400,500)

在这里插入图片描述


第四步,在属性事件轴上第20帧处添加关键帧,并在属性检查器中设置位置:(400,-500)

在这里插入图片描述


第五步,在属性事件轴上第30帧处添加关键帧,并在属性检查器中设置位置:(-400,-500)

在这里插入图片描述


第六步,在属性事件轴上第40帧处添加关键帧,并在属性检查器中设置位置:(-400,500)

在这里插入图片描述


好,至此,关键帧动态水印效果就制作完成,点击播放按钮,预览效果。

当然,演示的效果比较快,可调整关键帧的位置,以达到更好的效果。

在这里插入图片描述

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

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

相关文章

基于Javaweb的护肤品推荐系统 /基于ssm的护肤品销售系统

摘 要 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代&a…

八大排序(三)堆排序,计数排序,归并排序

一、堆排序 什么是堆排序:堆排序(Heap Sort)就是对直接选择排序的一种改进。此话怎讲呢?直接选择排序在待排序的n个数中进行n-1次比较选出最大或者最小的,但是在选出最大或者最小的数后,并没有对原来的序列…

【牛客网-面试必刷TOP101】二分查找题目

目录 二维数组中的查找_牛客题霸_牛客网 (nowcoder.com) 寻找峰值_牛客题霸_牛客网 (nowcoder.com) 数组中的逆序对_牛客题霸_牛客网 (nowcoder.com) 旋转数组的最小数字_牛客题霸_牛客网 (nowcoder.com) 二维数组中的查找_牛客题霸_牛客网 (nowcoder.com) 题意&#xff1a…

毕业设计选题uniapp+springboot新闻资讯小程序源码 开题 lw 调试

💕💕作者:计算机源码社 💕💕个人简介:本人七年开发经验,擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等,大家有这一块的问题可以一起交流! 💕&…

Redis 列表类型(List)和命令(数据类型 三)

基本概念 Redis 列表是一种非常实用和多功能的数据结构,适用于各种场景,如消息队列、实时数据流、任务队列、排行榜、历史记录等。 列表底层是压缩列表(数据量小、元素简单时)和双向循环链表(数据量较大、元素复杂时&…

基于 QT 实现一个 Ikun 专属桌面宠物

Step0、实现思路 想到的思路有两种: 1、使用 QT 的状态机模式,参考官网文档,这个模式的解耦最佳 2、使用原生 Wigets,将窗口设置为透明无框,循环播放桌面宠物的状态 本文采用第二种思路,实现一个极简版…

低功耗引擎Cliptrix为什么可以成为IOT的高效能工具

在万物互联的时代,现代人已普遍接受电视、音箱等电器设备具备智能化能力,也是在这个趋势下,我们身边越来越多的iOT设备联网和交互成为刚需。 但iot设备也面临到一些非常显著的痛点,例如iot设备的内存、处理器等核心元件无法与手机…

拉链法和开放寻址法 c++实现

拉链法&#xff08;以下为代码&#xff09; #include<iostream> #include<cstring>using namespace std; const int N100003; int h[N],e[N],ne[N]; int n,idx;void insert(int x){int k(x%NN)%N;e[idx]x;ne[idx]h[k];h[k]idx; }bool find(int x){int k(x%NN)%N;f…

Java之多线程的综合练习二

练习六&#xff1a;多线程统计并求最大值 需求&#xff1a; 在上一题基础上继续完成如下需求&#xff1a; 每次抽的过程中&#xff0c;不打印&#xff0c;抽完时一次性打印(随机) 在此次抽奖过程中&#xff0c;抽奖箱1总共产生了6个奖项。 分别为&#xff1a;10,20,100,50…

Chrome扩展V2到V3的变化

Chrome扩展manifest V3变化、升级迁移指南_chrome_ZK645945-华为云开发者联盟 (csdn.net) 1.background //V2 "background": "background.js"//V3 "background": {"service_worker": "background.js"} 2.executeScript …

[Java·算法·困难]LeetCode124.二叉树中的最大路径和

每天一题&#xff0c;防止痴呆 题目示例分析思路1题解1 &#x1f449;️ 力扣原文 题目 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;且不一定经…

对pyside6中的textedit进行自定义,实现按回车可以触发事件。

以下方法不算最优解。因为这个ui文件很容易重新编译&#xff0c;使写在ui.py里面的代码被删掉。 所以更好的方法应该是在主代码当中单独定义控件。并且使用布局添加控件到界面中。 以下内容纯为旧版实现&#xff0c;仅供参考&#xff1a; 我的实现方法是&#xff0c;先用qt de…

拒绝水文!八大排序(三)【适合初学者】快速排序

文章目录 快速排序递归实现霍尔法优化 挖坑法前后指针法 快速排序非递归 大家好&#xff0c;我是纪宁&#xff0c;这篇文章将向大家介绍非常有名气的一款排序&#xff1a;快速排序 回忆到我们刚开始学习C语言的时候。经常会使用到一个库函数&#xff1a; qsort函数 &#xff0…

运维困局下确保系统稳定的可行性

业务高速发展背后的困局 随着业务的快速发展&#xff0c;运维体系也逐步的完善起来。业务的稳定性和服务质量也在监控、可用性等体系的相互环抱下健康地成长。所有的问题、故障及影响稳定性的因素都在可控、可收敛的范围内&#xff0c;一切都向着好的方向发展。 这一切的背后…

【JavaEE】JavaScript

JavaScript 文章目录 JavaScript组成书写方式行内式内嵌式外部式&#xff08;推荐写法&#xff09; 输入输出变量创建动态类型基本数据类型数字类型特殊数字值 String转义字符求长度字符串拼接布尔类型undefined未定义数据类型null 运算符条件语句if语句三元表达式switch 循环语…

Nginx查找耗时的接口

Nginx查找耗时的接口 # grep 是筛选的域名 awk中的$5是判断的状态码 sort中的15是指的upstream_response_time 当然也可以统计request_time的时间cat access.log | grep zhhll.icu | awk $5 200{print $0} | sort -k 15 -n -r | head -10 https://zhhll.icu/2021/linux/实…

百元价位开放式耳机哪款好、百元耳机性价比最高的开放式耳机推荐

现如今越来越多的人选择开放式耳机&#xff0c;因为开放式耳机具有多重优点&#xff0c;首先是舒适性。由于它们不需要插入耳道&#xff0c;长时间佩戴也不会产生不适感。其次&#xff0c;开放式耳机在保持与外界的连接上表现出色&#xff0c;使得户外活动更加安全。另外&#…

Unity Game FrameWork—模块使用—资源热更新

工程选项配置​ json文件解析不要用默认的unity解析方式&#xff0c;unity解析有问题&#xff0c;使用StarForce.LitJsonHelper​ ​ 资源模式改为热更新模式​ ​ 配置文件配置​ BuiltinDataComponent自定义组件引用率了Buildinfo.txt配置文件&#xff0c;该文件配置了热更…

幽默逻辑树

基本逻辑树 以下是一个幽默的逻辑树结构示例&#xff1a; 开始 ├─ 拿出一杯咖啡 ├─ 喝一口咖啡 │ └─ 是否烫嘴&#xff1f; │ ├─ 是 │ │ ├─ 吐出咖啡 │ │ └─ 等待凉一点再喝 │ └─ 否 │ └─ 继续喝咖啡 ├─ …

实时人脸检测:基于卷积神经网络CNN和OpenCV的摄像头应用

一、前言 人脸检测是计算机视觉中的重要任务之一,广泛应用于人脸识别、人脸表情分析、人脸跟踪等领域。在实时视频流中进行人脸检测可以帮助我们快速准确地识别和定位图像中的人脸。本文将介绍如何使用 OpenCV 库来实现通过本地摄像头获取实时视频流,并利用预训练的深度学习…