自定义TimeLine实现卡拉OK轨

系列文章目录

自定义TimeLine


自定义TimeLine

  • 系列文章目录
  • 前言
  • 正文
    • UI部分
    • 代码部分
      • Data(数据)
      • Clip(片段)
      • Track(轨道)
      • Mixer(混合)
      • 被控制物体
  • 总结


前言

自定义TimeLine实际上就是自定义轨道, 在这里我们实现一个简单的例子,我使用的Unity版本是2021.3.20f1c1
创建的一个URP项目。其实Build-in也是一样的 但是有的代码可能需要改一下。

正文

在这里先介绍一下实现思路,因为要实现的是我们每次收看音乐频道的时候下方歌词的效果,首先我们需要创建两个Text一个在下面,作为底色,然后在控制上层的字进行移动以达到效果

UI部分

我使用TMP创建的Text,其中的结构如下图

在这里插入图片描述

其中有一个地方需要着重说一下就是 Mask 这是一个 空物体挂在了Rect Mask 2D 组件 用于遮挡文字实现效果,如果不使用遮罩而是直接控制Text会出现文字卡顿的现象为了避免这种现象所以使用的是遮罩。
还有就是需要把中心点设为(0,0)
在这里插入图片描述
还有就是创建一个空物体加上Playable Director 组件控制timeline。

代码部分

Data(数据)

using UnityEngine.UI;
using UnityEngine.Playables;public class TextBehaviour : PlayableBehaviour
{public string line; //我们要显示的文字public float speed; // 文字移动的速度
}

Clip(片段)

using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;public class TextClip : PlayableAsset,ITimelineClipAsset
{private TextBehaviour template;//这俩个参数是参数,不需要进行拖拽操作所以没有使用再上一篇讲的暴露变量public float speed;public string Line;public override Playable CreatePlayable(PlayableGraph graph, GameObject owner){var playable = ScriptPlayable<TextBehaviour>.Create(graph, template);TextBehaviour clone = playable.GetBehaviour();clone.speed = speed;clone.line = Line;return playable;}public ClipCaps clipCaps => ClipCaps.All;
}

Track(轨道)

using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;[TrackBindingType(typeof(TextController))]
[TrackColor(255/255f,255/255f,200/255f)]
[TrackClipType(typeof(TextClip))]
public class TextTrack : TrackAsset
{public override Playable CreateTrackMixer(PlayableGraph graph, GameObject go, int inputCount){return ScriptPlayable<TextMixer>.Create(graph, inputCount);}
}

Mixer(混合)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;public class TextMixer : PlayableBehaviour
{private string defaultLine = default;private float defaultProgress = default;public override void ProcessFrame(Playable playable, FrameData info, object playerData){var textController = playerData as TextController;int inputCount = playable.GetInputCount();string currentLine = defaultLine;float currentProgress = defaultProgress;bool isEmpty = true;for (int i = 0; i < inputCount; i++){var clipPlayable = (ScriptPlayable<TextBehaviour>)playable.GetInput(i);// 获取当前的 TextBehaviour behaviour = clipPlayable.GetBehaviour();float inputWight = playable.GetInputWeight(i);Debug.Log(inputWight);if (inputWight > 0){isEmpty = false;float progress = (float)(clipPlayable.GetTime() / clipPlayable.GetDuration());if(textController) textController.OnUpdate(behaviour.line,behaviour.speed,progress);}//textController.OnUpdate(defaultLine,0,defaultProgress);}if (isEmpty){textController.OnUpdate(defaultLine,0,defaultProgress);}}
}

被控制物体

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;public class TextController : MonoBehaviour
{public TextMeshProUGUI baseText;public TextMeshProUGUI colorText;[SerializeField]private RectTransform maskTransform;public void OnUpdate(string line,float speed,float progress){baseText.text = line;colorText.text = line;float x = colorText.preferredWidth * progress * speed;maskTransform.sizeDelta = new Vector2(x, maskTransform.sizeDelta.y);}
}

在这里插入图片描述
在这里插入图片描述

总结

基本上说完了,因为这个只是做一个简单示例所以也没有过多的细讲。因为只要理解了原理这其实很简单的。

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

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

相关文章

Redis缓存的高并发问题

Redis 做缓存虽减轻了 DBMS 的压力&#xff0c;减小了 RT&#xff0c;但在高并发情况下也是可能会出现各 种问题的。 1 缓存穿透 当用户访问的数据既不在缓存也不在数据库中时&#xff0c;就会导致每个用户查询都会“穿透” 缓存“直抵”数据库。这种情况就称为缓存穿透。一个…

OpenCV(十):图像缩放、翻转、拼接的介绍与使用

目录 &#xff08;1&#xff09;图像缩放&#xff1a;resize() &#xff08;2&#xff09;图像翻转&#xff1a; flip() &#xff08;3&#xff09;图像拼接&#xff1a;hconcat() 和vconcat() &#xff08;1&#xff09;图像缩放&#xff1a;resize() 使用 cv2.resize() 函…

sql:SQL优化知识点记录(十一)

&#xff08;1&#xff09;用Show Profile进行sql分析 新的一个优化的方式show Profile 运行一些查询sql&#xff1a; 查看一下我们执行过的sql 显示sql查询声明周期完整的过程&#xff1a; 当执行过程出现了下面这4个中的时&#xff0c;就会有问题导致效率慢 8这个sql创建…

搬家快递服务小程序的便利性

在当今快节奏的生活中&#xff0c;搬家可能是很多人都需要面对的问题。无论是新房子还是新办公室&#xff0c;都需要高效、便捷的搬家服务。本文将介绍如何使用第三方小程序制作平台&#xff0c;如乔拓云平台&#xff0c;开发一款高效便捷的搬家服务小程序。 1. 注册登录第三方…

【易售小程序项目】修改“我的”界面前端实现;查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】

文章目录 “我的”界面修改效果界面实现界面整体代码 查看已发布商品界面效果商品数据表后端上架、下架商品ControllerMapper 界面整体代码back方法 编辑商品、商品发布、保存草稿后端商品校验方法Controller 页面整体代码 同项目其他文章 “我的”界面修改 效果 界面实现 界…

【C++设计模式】详解装饰模式

2023年8月31日&#xff0c;周四上午 这是我目前碰到的最难的设计模式..... 非常难以理解而且比较灵活多半&#xff0c;学得贼难受&#xff0c;写得贼费劲..... 2023年8月31日&#xff0c;周四晚上19:48 终于写完了&#xff0c;花了一天的时间来学习装饰模式和写这篇博客。 …

序列到序列学习(seq2seq)

permute(1,0,2)&#xff0c;将batch_size 放在中间state 最后一个时刻&#xff0c;每个层的输出

数学建模--Subplot绘图的Python实现

目录 1.Subplot函数简介 2.Subplot绘图范例1:绘制规则子图 3.Subplot绘图范例2:绘制不规则子图 4.Subplot绘图范例3:gridspec辅助实战1 5.Subplot绘图范例4:gridspec辅助实战2 1.Subplot函数简介 """ 最近在数学建模种需要绘制多张子图,发现对于subplot函…

QT文件对话框,将标签内容保存至指定文件

一、主要步骤 首先&#xff0c;通过getSaveFileName过去想要保存的文件路径及文件名&#xff0c;其次&#xff0c;通过QFile类实例化一个文件对象&#xff0c;再读取文本框中的内容&#xff0c;最后将读取到的内容写入到文件中&#xff0c;最后关闭文件。 1.txt即为完成上述操作…

laragon 为 php 安装 Xdebug 扩展

众所周知&#xff0c;php 自带的 var_dump() 输出格式很不直观 而 laragon 作为很好的 windos 下开发环境很受欢迎&#xff0c;本文就介绍如何快速为 laragon 的 php 安装 Xdebug&#xff0c;方便开发调试 一&#xff1a;启动开发环境&#xff0c;在任意可访问 php 页面中输出 …

蓝桥杯备赛(Day5)——二叉树

二叉树存储 普通做法,二叉树一个节点包括结点的数值以及指向左右子节点的指针 在class Node中 def __init__(self,s,l=None,r=None):self.val=Noneself.l=lself.r=r 在竞赛中,我们往往使用静态数组实现二叉树,定义一个大小为N的静态结构体数组,使用其来存储一棵二叉树。…

python 学习笔记(4)—— webdriver 自动化操作浏览器(基础操作)

安装 web driver&#xff1a; 使用 driver 前&#xff0c;需要下载与浏览器版本相对应的 driver。如要在 Chrome 浏览器上操作&#xff0c;就要下载Chrome Driver。 几个常用浏览器的参考和下载地址&#xff1a; Edge Driver&#xff1a;https://developer.microsoft.com/en…

密码学入门——环游密码世界

文章目录 参考书目一、基本概念1.1 本书主要角色1.2 加密与解密 二、对称密码与公钥密码2.1 密钥2.2 对称密码和公钥密码2.3 混合密码技术 三、其他密码技术 参考书目 图解密码技术 第三版 一、基本概念 1.1 本书主要角色 1.2 加密与解密 加密 解密 密码破译 二、对称密…

Ansible之playbook详解和应用实例

目录 一、playbook简介 1.什么是playbook 2.playbook组成 二、应用实例 1.使用playbook安装启用httpd服务 2.使用playbook安装启用nginx服务 三、ansible-playbook其他用法 1.检查yaml文件的语法是否正确 2.检查tasks任务 3.检查指定的主机 4.指定从某个task开始运行…

Playwright for Python:断言

一、支持的断言 Playwright支持以下几种断言&#xff1a; 断言描述expect(locator).to_be_checked()复选框被选中expect(locator).to_be_disabled()元素是禁用状态expect(locator).to_be_editable()元素是可编辑状态expect(locator).to_be_empty()容器是空的expect(locator).…

Python列表排序

介绍一个关于列表排序的sort方法&#xff0c;看下面的案例&#xff1a; """ 列表的sort方法来对列表进行自定义排序 """# 准备列表 my_list [["a", 33], ["b", 55], ["c", 11]]# 排序&#xff0c;基于带名函数 …

Build阶段-Maven安装配置

构建Java项目的工具一般有两种选择&#xff0c;一个是Maven&#xff0c;一个是Gradle。 这里我们选择Maven作为项目的编译工具。 具体安装Maven流程不做阐述&#xff0c;但是需要确保配置好Maven仓库私服以及JDK编译版本

亚马逊云科技 云技能孵化营——我的云技能之旅

文章目录 每日一句正能量前言活动流程后记 每日一句正能量 不能在已经获得足够多的成功时&#xff0c;还对自己的能力保持怀疑&#xff0c;露出自信的微笑&#xff0c;走出自信的步伐&#xff0c;做一个自信的人&#xff01; 前言 亚马逊云科技 (Amazon Web Services) 是全球云…

镜像的基本命令(docker)

文章目录 前言一、docker命令介绍1、帮助命令2、显示镜像3、搜索镜像4、下载镜像5、删除镜像 总结 前言 本文主要介绍docker中与镜像相关的一些命令&#xff0c;是对狂神课程的一些总结&#xff0c;作为一个手册帮助博主和使用docker的同学们来查找和回忆。 实验环境&#xf…

【买华为云产品,返CSDN余额红包】,快来薅羊毛!

华为云828营销季火热进行中&#xff0c;9月15日前首次购买华为云产品官网任意一款产品&#xff0c;可获得相应比例的CSDN红包。 热门产品云服务器、域名、商标、主机安全等产品都在其中&#xff0c;任君挑选。 活动优惠价购买后还是获得相应比例余额红包&#xff0c;实际付费金…