美文网首页
一个有趣的加载动画

一个有趣的加载动画

作者: Walk_In_Jar | 来源:发表于2018-03-16 16:57 被阅读0次
1.gif

需要借助到一个Vectrosity 划线插件,挺强大的,dotween也非常适合做动画。
创作过程是,先创建线,再想办法让线跟着点动,再完成其他的动画。
动画样式摘自zcool,源码原创!


QQ图片20180316165442.png
using UnityEngine;
using Vectrosity;
using System.Collections.Generic;
using DG.Tweening;
public class LoadingLineManager : MonoBehaviour
{
    public Transform[] Points;
    public Transform[] nums;
    public LineType lineType = LineType.Continuous;
    public Joins joins = Joins.Fill;
    public float lineWidth = 2;
    public float t;
    private VectorLine[] vectorLines;
    // Use this for initialization
    private void Start()
    {
        vectorLines = new VectorLine[Points.Length];
        for (int i = 0; i < vectorLines.Length; i++)
        {
            vectorLines[i] = new VectorLine("Line", new List<Vector2>(), lineWidth, lineType, joins);
            vectorLines[i].points2.Add(Vector2.zero);
            vectorLines[i].points2.Add(Vector2.zero);
        }
        InvokeRepeating("ChangeSi", 0, t);
    }
    // Update is called once per frame
    void Update()
    {
        for (int i = 0; i < vectorLines.Length; i++)//更新位置 绘制
        {
            int j = 0;
            if (i < Points.Length - 1)
            {
                j = i + 1;
            }
            else
            {
                j = 0;
            }
            vectorLines[i].points2[0] = Points[i].position;
            vectorLines[i].points2[1] = Points[j].position;
            vectorLines[i].Draw();
        }
    }
    /// <summary>
    ///  取 1 3 5 7 位置的point的z 减去90
    /// </summary>
    void ChangeSi()
    {
        for (int i = 1; i < nums.Length; i += 2)
        {
            nums[i].DOLocalRotate(new Vector3(0, 0, nums[i].localEulerAngles.z - 90), t - 0.3f, RotateMode.FastBeyond360);
        }
        transform.DOLocalRotate(new Vector3(0, 0, transform .localEulerAngles.z - 45), t - 0.3f, RotateMode.FastBeyond360);
    }
}

加点颜色渐变吧


2.gif
    void ChangeSi()
    {
        for (int i = 1; i < nums.Length; i += 2)
        {
            nums[i].DOLocalRotate(new Vector3(0, 0, nums[i].localEulerAngles.z - 90), t - 0.3f, RotateMode.FastBeyond360);  //位置跳跃
        }
        for (int i = 0; i < Points.Length; i++)
        {
            Color c = colors[Random.Range(0, colors.Length)];
            Points[i].GetComponent<Graphic>().DOColor(c, t - 0.3f);//渐变颜色动画
            vectorLines[i].color = c;
        }
        transform.DOLocalRotate(new Vector3(0, 0, transform.localEulerAngles.z - 45), t - 0.3f, RotateMode.FastBeyond360);
    }

另一种移动至目标位置


3.gif
QQ图片20180316174650.png
    void ChangeSi()
    {
        for (int i = 1; i < Points.Length; i += 2)
        {
           // 移动至目标位置的方法
            if (i > 1)
                Points[i].DOLocalMove(Points[i - 2].localPosition, t - 0.1f, true);
            else
                Points[i].DOLocalMove(Points[Points.Length - 1].localPosition, t - 0.1f, true);
        }
        for (int i = 0; i < Points.Length; i++)
        {
            Color c = colors[Random.Range(0, colors.Length)];
            Points[i].GetComponent<Graphic>().DOColor(c, t - 0.1f);//渐变颜色动画
            vectorLines[i].color = c;
        }
        transform.DOLocalRotate(new Vector3(0, 0, transform.localEulerAngles.z - 45), t - 0.3f, RotateMode.FastBeyond360);
    }

相关文章

  • 一个有趣的加载动画

    需要借助到一个Vectrosity 划线插件,挺强大的,dotween也非常适合做动画。创作过程是,先创建线,再想...

  • UI 用户界面的应用与最新趋势

    创意动画 1. 品牌加载 公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到...

  • iOS关于CAReplicatorLayer(多图层复制)动画

    分别写了关于指示器动画,圆形加载动画。效果如图: 第一个动画代码如下 第二个动画就很有趣了,因为可以这样子玩。四个...

  • 这是一个有趣的android加载动画

    之前学习canvas画图的时候,写了一个Android的加载动画,代码托管在github上面。 这里是github...

  • CABasicAnimation动画页面跳转返回后停止

    之前把一张图片旋转来做了一个加载动画,但发现动画在加载时跳转了页面返回后没加载完成动画也停止了。 把动画的auto...

  • 在线简历

    预览源码 1. 加载动画 这是一个伪加载动画:通过 setTimeout(fn,s) 实现的正在加载中的错觉CSS...

  • Android 加载动画源码资源大全

    1.Slack 加载动画 2.百分比加载动画 3.仿支付宝的加载动画 4.一个自定义多种加载状态页面类库 5.图片...

  • android自定义View索引

    一:加载动画 1:android仿qq下拉刷新旋转白条加载动画 2:android常用旋转线条加载动画 ...

  • iOS 简约加载动画详解

    iOS 简约加载动画详解 iOS 简约加载动画详解

  • 图片动画

    把一张图片旋转来做了一个加载动画,但发现动画在加载时跳转了页面返回后没加载完成动画也停止了 方案一: CABasi...

网友评论

      本文标题:一个有趣的加载动画

      本文链接:https://www.haomeiwen.com/subject/qbrrqftx.html