Unity Animancer插件（一）基本使用

「爱情、让人受尽委屈。」 2023-09-23 17:55 127阅读 0赞

Animancer是什么？[资源商店主页][Link 1]

## 一、快速播放 ##

我们来通过Animancer实现一个最基本的动画播放效果。

首先创建一个脚本`PlayAnimationOnEnable`，编写如下代码

public AnimancerComponent animancer;
    public AnimationClip clip;
    
    private void OnEnable()
    {
        
    	animancer.Play(clip);
    }

很容易理解，就是在`OnEnable()`时播放一个指定的动画片段。

接下来为角色添加`Animator`、`Animancer Component`和刚刚编写的`PlayAnimationOnEnable`，并为字段赋值  
![8bfcd50c105c82ae02f3264ca9b66acc.png][]

接下来运行游戏就可以看到效果了  
![696e9c761d0c946c308f7c4856ebeb38.gif][]

此时角色身上的`Animancer Component`组件可以看到当前动画的各项参数  
![74ee148f90ab5c8853c1377fa8c81eb4.png][]

## 二、基础移动 ##

下面我们来实现通过按键控制角色在`Idle`于`Walk`之间转换。

新创建一个脚本`BaseMovement`。在代码中监听Y轴上的输入。然后根据监听到的数值判断角色状态，并播放相应的动画

public AnimancerComponent animancer;  
    public AnimationClip idle;  
    public AnimationClip walk;  
      
    private void Update()  
    {
          
        float y = Input.GetAxis("Vertical");  
        animancer.Play(y > 0.1f ? walk : idle);  
    }

给对应字段赋值后，启动游戏看下效果  
![55358ae4bc78db1b954be32bccfacd07.gif][]

## 三、基础动作 ##

下面来实现一个开枪效果。在默认状态下，角色处于`Idle`状态，当点击鼠标左键时，角色进入射击状态，射击完成后再返回`Idle`状态。

首先创建一个脚本`BasicAction`，编写如下代码。这里通过动画播放完成后的回调事件，使角色返回`Idle`状态

public AnimancerComponent animancer;
    public AnimationClip idle;
    public AnimationClip shoot;
    
    private void OnEnable()
    {
        
    	animancer.Play(idle);
    }
    
    private void Update()
    {
        
    	if (Input.GetMouseButtonDown(0))
    	{
        
    		var state = animancer.Play(shoot);
    		state.Events.OnEnd = OnEnable;
    	}
    }

看下效果  
![d907874927bd35ab520a6007760f259d.gif][]

此时我们必须等待射击动画播放完成才能再次射击，这是因为`Animancer`在动画播放过程中并不会重新执行`Play()`。解决方法也很简单，只需要在`Play()`执行后将状态的`Time`设置为0即可

// ...
    private void Update()
    {
        
    	if (Input.GetMouseButtonDown(0))
    	{
        
    		var state = animancer.Play(shoot);
    		state.Time = 0;
    		state.Events.OnEnd = OnEnable;
    	}
    }

看下效果  
![6a69145c66339e2d61cc0e1e99ddc893.gif][]

## 四、过渡 ##

前面的射击动画由于不存在过渡，看起来很生硬，所以接下来我们给动画添加上过渡效果。

添加过渡效果非常简单，只需要在`Play()`方法中添加一个过渡时间的参数（Lite版只允许设置为0.25）

public AnimancerComponent animancer;  
    public AnimationClip idle;  
    public AnimationClip shoot;
    
    private void OnEnable()
    {
        
    	animancer.Play(idle,0.25f);
    }
    
    private void Update()
    {
        
    	if (Input.GetMouseButtonDown(0))
    	{
        
    		var state = animancer.Play(shoot,0.25f);
    		state.Time = 0;
    		state.Events.OnEnd = OnEnable;
    	}
    }

看下效果  
![52796ccfde00a5c7d0b5be8d5680139e.gif][]

另外，`Play()`方法还可以设置第三个参数，用来指定淡入淡出的模式。将其设置为`FadeMode.FromStart`可以使动画始终从开始淡入。这样一来也就不需要设置`Time`为0了。

// ...
    private void Update()
    {
        
    	if (Input.GetMouseButtonDown(0))
    	{
        
    		var state = animancer.Play(shoot,0.25f,FadeMode.FromStart);
    		state.Events.OnEnd = OnEnable;
    	}
    }

在前面的示例中，我们使用的都是`AnimationClip`接收动画剪辑。但这种方式对于过渡时的各项参数不够直观。`Animancer`为我们封装了一个更加实用的类型`ClipTransition`。我们只需要将脚本中的`AnimationClip`换成`ClipTransition`，即可在检视面板中直观地看到和设置动画的各项过渡参数  
![aaa333787abe6af570817e3184c7e374.png][]

此外，`ClipTransition`还可以允许我们对单个的动画剪辑设置触发事件

public AnimancerComponent animancer;  
    public ClipTransition idle;  
    public ClipTransition shoot;
    
    private void OnEnable()
    {
        
    	// 直接在动画剪辑上绑定事件
    	shoot.Events.OnEnd = OnShootEnd;
    	animancer.Play(idle);
    }
    
    private void OnShootEnd()
    {
        
    	animancer.Play(idle);
    }
    
    private void Update()
    {
        
    	if (Input.GetMouseButtonDown(0))
    	{
        
    		animancer.Play(shoot);
    	}
    }

## 五、综合应用 ##

下面通过一个案例来对前面的内容进行串联。我们需要通过一个有限状态机来控制角色在行走、待机、射击状态之间切换。创建一个脚本`BasicCharacter`并编写如下代码

public AnimancerComponent animancer;
    public ClipTransition idle;
    public ClipTransition shoot;
    public ClipTransition walk;
    
    /// <summary>
    /// 角色状态
    /// </summary>
    private enum PlayerState
    {
        
    	Move,
    	Shoot
    }
    
    private PlayerState _curState;
    
    private void OnEnable()
    {
        
    	_curState = PlayerState.Move;
    	shoot.Events.OnEnd = OnShootEnd;
    }
    
    /// <summary>
    /// 射击结束回调
    /// </summary>
    private void OnShootEnd()
    {
        
    	_curState = PlayerState.Move;
    }
    /// <summary>
    /// 移动
    /// </summary>
    private void Move()
    {
        
    	_curState = PlayerState.Move;
    	float y = Input.GetAxis("Vertical");
    	animancer.Play(y > 0.1f ? walk : idle);
    }
    /// <summary>
    /// 射击
    /// </summary>
    private void Shoot()
    {
        
    	if (Input.GetMouseButtonDown(0))
    	{
        
    		_curState = PlayerState.Shoot;
    		animancer.Play(shoot);
    	}
    }
    
    private void Update()
    {
        
    	switch (_curState)
    	{
        
    		case PlayerState.Move:
    			Move();
    			Shoot();
    			break;
    		case PlayerState.Shoot:
    			Shoot();
    			break;
    	}
    }

代码很简单，来看下效果  
![5702432b635748e4b731f55a1c25385f.gif][]

## 六、参考资料 ##

\[1\]. https://kybernetik.com.au/animancer/docs/

[Link 1]: https://assetstore.unity.com/packages/tools/animation/animancer-pro-116514
[8bfcd50c105c82ae02f3264ca9b66acc.png]: https://img-blog.csdnimg.cn/img_convert/8bfcd50c105c82ae02f3264ca9b66acc.png
[696e9c761d0c946c308f7c4856ebeb38.gif]: https://img-blog.csdnimg.cn/img_convert/696e9c761d0c946c308f7c4856ebeb38.gif
[74ee148f90ab5c8853c1377fa8c81eb4.png]: https://img-blog.csdnimg.cn/img_convert/74ee148f90ab5c8853c1377fa8c81eb4.png
[55358ae4bc78db1b954be32bccfacd07.gif]: https://img-blog.csdnimg.cn/img_convert/55358ae4bc78db1b954be32bccfacd07.gif
[d907874927bd35ab520a6007760f259d.gif]: https://img-blog.csdnimg.cn/img_convert/d907874927bd35ab520a6007760f259d.gif
[6a69145c66339e2d61cc0e1e99ddc893.gif]: https://img-blog.csdnimg.cn/img_convert/6a69145c66339e2d61cc0e1e99ddc893.gif
[52796ccfde00a5c7d0b5be8d5680139e.gif]: https://img-blog.csdnimg.cn/img_convert/52796ccfde00a5c7d0b5be8d5680139e.gif
[aaa333787abe6af570817e3184c7e374.png]: https://img-blog.csdnimg.cn/img_convert/aaa333787abe6af570817e3184c7e374.png
[5702432b635748e4b731f55a1c25385f.gif]: https://img-blog.csdnimg.cn/img_convert/5702432b635748e4b731f55a1c25385f.gif