使用Material实现动画效果

作者: JervieQin | 来源:发表于2018-05-01 23:30 被阅读61次

实现精灵动画的方式有两种:一种是将精灵切片后选中动作区域的sprites然后一起拉到场景种形成Animation;第二种是手写脚本定位spritesheet的偏移。前一种操作友好,后一种性能友好。
我们这一次,就来实现第二种方法。先上效果图。


原始spritesheet
最终效果

连续动画的实现

将textures设置成Sprite2D(根据需要,背景没有透明时不需要调),然后切图。

创建一个材质球,将shader设置为:Mobile/Particles/AlphaBlended.然后设置texture。

将材质球附给Plane。

创建脚本控制偏移附给Plane。
讲解1:
确定一系列变量:

   public int Columns = 5;               //列数
   public int Rows = 5;                  //行数
   public float FramesPerSecond = 10f;   //修改的帧率
   public bool RunOnce = true;           //动画是否循环

讲解2:
先获取自身材质的拷贝,然后根据定制好的行列修改材质Texture尺寸。

//拷贝一份自身的材质,避免影响材质的其他受众
        materialCopy = new Material(GetComponent<Renderer>().sharedMaterial);
        GetComponent<Renderer>().sharedMaterial = materialCopy;
 
        Vector2 size = new Vector2(1f / Columns, 1f / Rows);
        GetComponent<Renderer>().sharedMaterial.SetTextureScale("_MainTex", size);

讲解3:
然后不停修改材质texture的偏移量,达到动画的效果。

        float x = 0f;
        float y = 0f;
        Vector2 offset = Vector2.zero;
 
        while (true)
        {
            for (int i = Rows-1; i >= 0; i--) // y
            {
                y = (float) i / Rows;
 
                for (int j = 0; j <= Columns-1; j++) // x
                {
                    x = (float) j / Columns;
 
                    offset.Set(x, y);
 
                    GetComponent<Renderer>().sharedMaterial.SetTextureOffset("_MainTex", offset);
                    yield return new WaitForSeconds(1f / FramesPerSecond);
                }
            }
 
            if (RunOnce)
            {
                yield break;
            }
        }

完整代码:

class SpriteSheetAnimation : MonoBehaviour
{
    public int Columns = 5;
    public int Rows = 5;
    public float FramesPerSecond = 10f;
    public bool RunOnce = true;
 
    public float RunTimeInSeconds
    {
        get
        {
            return ( (1f / FramesPerSecond) * (Columns * Rows) );
        }
    }
 
    private Material materialCopy = null;
 
    void Start()
    {
        //拷贝一份自身的材质,避免影响材质的其他受众
        materialCopy = new Material(GetComponent<Renderer>().sharedMaterial);
        GetComponent<Renderer>().sharedMaterial = materialCopy;
 
        Vector2 size = new Vector2(1f / Columns, 1f / Rows);
        GetComponent<Renderer>().sharedMaterial.SetTextureScale("_MainTex", size);
    }
 
    void OnEnable()
    {
        StartCoroutine(UpdateTiling());
    }
 
    private IEnumerator UpdateTiling()
    {
        float x = 0f;
        float y = 0f;
        Vector2 offset = Vector2.zero;
 
        while (true)
        {
            for (int i = Rows-1; i >= 0; i--) // y
            {
                y = (float) i / Rows;
 
                for (int j = 0; j <= Columns-1; j++) // x
                {
                    x = (float) j / Columns;
 
                    offset.Set(x, y);
 
                    GetComponent<Renderer>().sharedMaterial.SetTextureOffset("_MainTex", offset);
                    yield return new WaitForSeconds(1f / FramesPerSecond);
                }
            }
 
            if (RunOnce)
            {
                yield break;
            }
        }
    }
}

相关文章

  • 使用Material实现动画效果

    实现精灵动画的方式有两种:一种是将精灵切片后选中动作区域的sprites然后一起拉到场景种形成Animation;...

  • 聊聊 Android StateListAnimator

    简评:使用 StateListAnimator 轻松实现 Material Design 效果。 Material...

  • 使用CADisplayLink实现果冻效果动画

    使用CADisplayLink实现果冻效果动画

  • Material ProgressBar

    本文章翻译于:Material ProgressBar效果地址 虽然效果本身是很容易实现的,问题在于不确定动画看起...

  • SpringAnimator实现联动效果

    使用SpringAnimation实现弹簧联动 简介 弹簧效果动画SpringAnimation与甩动效果动画Fl...

  • UIView动画合集

    iOS开发-UIView之动画效果的实现方法(合集) 前言:在开发APP中,我们会经常使用到动画效果。使用动画可以...

  • 第一篇

    使用css实现旋转,缩放,阴影,动画的效果。

  • 骨骼动画

    为了实现动画效果,我们可以使用序列图,或者可以选择骨骼动画。这里的动画效果,并不是说图片通过变形拉伸等等实现的效果...

  • iOS动画-认识CoreAnimation

    前言 在iOS中,普通的动画可以使用UIKit提供的方法来实现动画,但如果想要实现复杂的动画效果,使用CoreAn...

  • Cesium轨迹线

    功能描述 添加自定义material,利用shader和贴图实现轨迹线效果。 示例效果 贴图 自定义材质 使用示例

网友评论

    本文标题:使用Material实现动画效果

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