【快速开发类TimeLine时间相关工具-Unity3D】

开发目标

快速开发类TimeLine插件,提升工具开发效率,将工作重心放到工具本身功能之上。不用花过多的精力编写基础时间轴功能。

基础功能描述

  1. 时间线绘制
  2. 播放控制
  3. 区域划分和绘制
  4. 帧、秒刻度切换
  5. Snap功能
  6. 拖动时间轴
  7. 缩放、扩大等【和Unity其他工具一样的快捷键和操作方式】可以体验下Unity本身的时间轴Ctrl+鼠标按键,Alt+鼠标按键+拖动

适用范围

  1. 技能编辑器
  2. 动画预览编辑器
  3. 非线编工具编辑器
  4. 时间相关工具开发

如何使用

克隆/下载工程,Window->ExampleTimeLineWindow即可打开查看基础时间轴窗口即可,
继承SimpleTimeArea,根据需求绘制窗口即可,** 一般开发复杂的工具,最好前期做好页面布局的规划,Top,Left,Top-Top,Bottom,Right,Right-Bottom等等如何划分,能够快速规划自己的编辑器的同时,逻辑不会混乱。**

Unity编辑器开发的重要思路

  1. 区域划分
  2. 区域功能独立
  3. 善用反射,有些功能是通过反射可以直接拿到不用单独实现
  4. 善于查看Unity的文档和编辑器源码【UnityC#代码早已经开源,如果发现Unity的某个窗口或者模块的编辑器能够参考,直接找到源码看下Unity官方如何实现的即可】
  5. 注重功能本身,提高易用性和间接性,易扩展
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using DMTimeArea;
using System;

public class ExampleTimeLine : SimpleTimeArea
{
    private Rect rectTotalArea;
    private Rect rectContent;
    private Rect rectTimeRuler;

    private Rect rectTopBar;
    private Rect rectLeft;
    public Rect rectLeftTopToolBar;

    private void OnGUI()
    {
    	// 
    }


    protected override void DrawVerticalTickLine()
    {
    	// 
    }

    protected virtual void DrawLeftContent()
    {
    	//
    }

    protected virtual void DrawTopToolBar()
    {
    	//
    }

效果展示

ExampleTimeLineWindow

非线编时间轴工具,代码未包含

开源地址

GitHub地址
如果对你有所帮助,希望Star支持,谢谢~

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于el-timeline组件的v-infinite-scroll使用,你可以通过以下步骤来实现: 1. 在el-timeline上添加v-infinite-scroll指令,并指定一个方法名,例如:`v-infinite-scroll="loadMoreData"`。 2. 在你的数据中添加一个变量来追踪是否还有更多数据可加载,例如:`hasMoreData: true`。 3. 在loadMoreData方法中,检查是否还有更多数据需要加载。如果有,你可以发送一个异步请求来获取更多数据。 4. 在请求成功后,将新获取的数据追加到现有数据中,并更新hasMoreData变量的值,告诉组件是否还有更多数据可加载。 5. 如果没有更多数据可加载,你可以调用v-infinite-scroll指令的`disable`方法来禁用滚动加载功能,例如:`v-infinite-scroll.disable()`。 下面是一个简单的示例代码: ```html <el-timeline v-infinite-scroll="loadMoreData"> <!-- timeline items --> </el-timeline> ``` ```javascript data() { return { timelineData: [], // 已有的数据 hasMoreData: true // 是否还有更多数据可加载 } }, methods: { loadMoreData() { if (this.hasMoreData) { // 发送异步请求来获取更多数据 // 在请求成功后追加到timelineData中 // 更新hasMoreData的值,判断是否还有更多数据可加载 // 如果没有更多数据可加载,禁用滚动加载功能:this.$refs.timeline.disableInfiniteScroll() } } } ``` 请根据你的实际需求进行适当的修改和调整。这只是一个简单的示例,具体的实现可能因你的项目结构和需求而有所不同。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值