自定义TimeLine实现卡拉OK轨

news2025/1/26 15:53:32

系列文章目录

自定义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.coloradmin.cn/o/965290.html

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

相关文章

搭建STM32F407的Freertos系统(基于STM32CubeMX)

本人长期开发Linux、Windows上应用软件&#xff0c;一直以来MCU开发有所接触&#xff0c;但较少&#xff08;最近项目需要&#xff0c;小公司么&#xff0c;都得会&#xff0c;被逼的&#xff09;&#xff0c;好在有STM32CubeMX这样工具&#xff0c;貌似就是我想要的工具。 本次…

C++ sizeof求类型大小

注意内存对齐 struct Stu {int id;char sex;float hight; }; cout<<sizeof(Stu)<<endl; 会输出什么&#xff1f; 字节对齐原则:在系统默认的对齐方式下&#xff1a;每个成员相对于这个结构体变量地址的偏移量正好是该成员类型所占字节的整数倍&#xff0c;且最终…

Level-based Foraging 多智能体游戏仿真环境

游戏场景测试 参考链接&#xff1a; https://kgithub.com/semitable/lb-foraging

信息化发展16

计算机网络 从网络的作用范围可将网络类别划分为个人局域网&#xff08; Per sona l Area Net work,PAN) &#xff1e;局域网C Local Area Net work, LAN ) &#xff1e; 城域网&#xff08; Metropoli tan Areaetwork , MAN &#xff09; 、广域网&#xff08; Wide Area Net…

230902-部署Gradio到已有FastAPI及服务器中

1. 官方例子 run.py from fastapi import FastAPI import gradio as grCUSTOM_PATH "/gradio"app FastAPI()app.get("/") def read_main():return {"message": "This is your main app"}io gr.Interface(lambda x: "Hello, …

基于缓冲原理计算轨迹相似度

目录 前言预备知识思路与核心代码优缺点分析数值实验参考文献 前言 接上文&#xff0c;我们已经知道如何利用夹角余弦来计算两条轨迹的相似度&#xff0c;也知道其中优势和劣势&#xff0c;夹角余弦方法作为一个基础的baseline有其存在的价值&#xff0c;很多学者也提出了各式…

前端基础4——jQuery

文章目录 一、基本了解1.1 导入jQuery库1.2 基本语法1.3 选择器 二、操作HTML2.1 隐藏和显示元素2.2 获取与设置内容2.3 获取、设置和删除属性2.4 添加元素2.5 删除元素2.6 设置CSS样式 三、jQuery Ajax3.1 基本语法3.2 回调函数3.3 常用HTTP方法3.4 案例一3.4.1 准备工作3.4.2…

SpringBoot完整项目部署流程(软件安装-前后端部署)

SpringBoot完整项目部署流程 安装Jdk 使用XTFP工具将jdk的二进制发布包上传到Linux 解压安装包 tar -zxvf jdk-8u171-linux-x64.tar.gz -C /usr/local解压完毕 配置环境变量&#xff0c;使用vim命令修改 /etc/profile文件&#xff0c;在文件末尾加入如下配置 JAVA_HOME/usr…

LeetCode 45题:跳跃游戏

题目 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - …

ctfshow—萌新赛—给她

0x00 前言 CTF 加解密合集CTF Web合集网络安全知识库 文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取 0x01 题目 0x02 Write Up 首先看到访问页面&#xff0c;正常情况下这种都是sql注入&#xff0c;尝试发现被转义了 尝试无果之后&#xff0c;扫描目录&#xff…

zookeeper 理论合集

目录 系统背景 集群结构 多个节点之间的角色 节点的状态 为什么引入 Observer 存储结构 ZNode 节点结构 ZNode 创建类型 内存数据存储 数据持久化 zookeeper 的容量大小 数据同步 消息广播 崩溃恢复 如何保证顺序一致性 核心流程 Leader 选举流程 脑裂问题 …

Python基础篇(17):模块与包

一、as 关键字的使用 1、as 关键字的作用&#xff1a;给导入的模块取别名 import 测试1 as Test_1 import 测试2 as Test_2Test_1.say_hello() Test_2.say_hello() 二、if __name__ __main__ 1、作用 测试当前模块所编写的代码块&#xff0c;根据业务自主选择需要运行的代…

李宏毅hw1_covid19预测_代码研读+想办法降低validation的loss(Kaggle目前用不了)

1.考虑调整这个neural network的结构尝试让这个loss降低 &#xff08;1&#xff09;Linear(inputdim,64) - ReLU-Linear(64,1), loss0.7174 &#xff08;2&#xff09;Linear(inputdim,64) - ReLU-Linear(64,64) -ReLU-Linear(64,1),loss 0.6996 &#xff08;3&#xff09;这…

spring boot + Consul 示例 (Kotlin版)

文章目录 1.docker 安装consul2.创建基于springboot的client2.1 依赖版本2.2 pom.xml2.3 启动类2.4 application.properties 3 搭建完成4. 总结 1.docker 安装consul docker-compose.yaml version: "3"services:consul:image: consul:1.4.4container_name: consule…

DevEco Studio 介绍、下载及安装

DevEco Studio 简介 HUAWEI DevEco Studio面向App、HAG快服务、IoT智能硬件设备3类开发者&#xff0c;提供设计、编码、编译、调测和云端测试等端到端一站式服务。一次开发&#xff0c;多端部署&#xff1a;支持18N全场景泛终端软件应用和服务开发开放能力一站集成&#xff1a…

5 大虚拟数字人工具:视频内容创作的未来

人工智能&#xff08;AI&#xff09;给视频内容创作领域带来了一场革命。这一领域的显着进步之一是人工智能生成的会说话的化身的出现&#xff0c;它已经成为制作高质量视频的游戏规则改变者&#xff0c;而无需专业演员或昂贵的视频编辑软件。在这篇博文中&#xff0c;我们将深…

上半年净利润同比改善22.18%,赛力斯的韧性从何而来?

2023年上半年&#xff0c;伴随特斯拉一声全球大降价&#xff0c;新能源汽车行业价格混战拉开帷幕&#xff0c;车企业绩纷纷承压。“卷”风盛行之下&#xff0c;谁抗住了压力&#xff1f; 8月30日&#xff0c;赛力斯发布了中期业绩报告。根据财报&#xff0c;2023年上半年&…

10. selenium API (二)

目录 1. 多层框架/窗口定位 2. 下拉框处理 2.1 前端界面 2.2 代码 3. 针对 alert 弹窗进行操作 3.1 前端界面 3.2 代码 4. 文件提交 4.1 前端界面 4.2 代码 5. 显示等待 6. 操作浏览器滚动条 7. 截图 8. 浏览器关闭 9. 窗口切换 在上篇文章中&#xff0c;我们学…

Laravel 集合的使用 集合的常用方法 模型的数据集合 ⑩

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; THINK PHP &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f44…

【Linux】文件

Linux 文件 什么叫文件C语言视角下文件的操作文件的打开与关闭文件的写操作文件的读操作 & cat命令模拟实现 文件操作的系统接口open & closewriteread 文件描述符进程与文件的关系重定向问题Linux下一切皆文件的认识文件缓冲区缓冲区的刷新策略 stuout & stderr 什…