一、DOTween练习
1.金币搜集动画
新建一个Panel,将其的 Image组件的透明度条件为0,在为其添加一个脚本,命名为UIManager,后面将用这个脚本来控制整个动画。效果如下:
创建一个空物体并命名为CoinParent,在为其创建一个子物体image,将素材图片跟换,在为其添加一个脚本CoinDOTween,用来控制动画。再将子物体image重命名为Coin并设置为预制体。
创建一个积分的背景,命名为ScoreBg,在创建一个 image作为金币的图标,
创建一个文本框作为显示数字的变化。
然后新建一个button,作为增加金币的按钮,这样基本的场景就搭建好了。效果如下:
接下来开始脚本编辑
序列化拿到需要的东西
[SerializeField] private Transform coinParent;
[SerializeField] private Image coinPrefab;
[SerializeField] private int positionMin, positionMax;//获取随机位置
[SerializeField] private int rotationMin, rotationMax;//转动角度
[SerializeField] private TextMeshProUGUI counterText;//计数
然后为了方便动画控制这里需要建立一个数组
private List
创建用于计数的变量
private int _CoinNum = 0;//用于计数
需要一个生成金币预制体的方法,并且生成的数量是随机的。
private void Generatecoins()
{
int num = Random.Range(7, 16);
for(int i = 0;i < num; i++)
{
Image coin = Instantiate(coinPrefab, Vector3.zero, Quaternion.identity, coinParent);//生成预制体
coin.transform.localPosition = new Vector3(Random.Range(positionMin, positionMax + 1)
, Random.Range(positionMin, positionMax + 1), 0);//设置位置随机
coin.transform.rotation = Quaternion.Euler(new Vector3(0, 0, Random.Range(rotationMin, rotationMax + 1)));//设置角度随机
_coinList.Add(coin);
}
_CoinNum = num;
}
写一个按钮的放方法来调用随机生成金币
public void Reward()
{
_coinList.Clear();//每次点击按钮清空
Generatecoins();
}
写完这部分逻辑之后找到UIManager物体,将相关物体关联,并附与相应的数值,再将按钮绑定。
现在测试是否能正常生成,效果如下:
现在随机生成的逻辑正确,接下来做第二部分。
编写生成动画的方法,希望实现的动画效果是金币是一个个间隔的时间过去,要为金币设置一个延时
private void MakeTweens()
{
float delay = 0f;
for(int i = 0; i < _CoinNum; i++)
{
_coinList[i].GetComponent
}
}
现在编写CoinDOTween脚本里面的逻辑
private Image _image;
[SerializeField] private Vector2 _tangetPos;
private void Awake()
{
_image = GetComponent
}
//播放动画
public void playTween(float delay)
{
transform.DOScale(1, 0.3f).SetEase(Ease.OutBack).OnComplete(() =>
{
_image.rectTransform.DOMove(_tangetPos, 0.6f).SetEase(Ease.OutQuad).SetDelay(delay).OnComplete(() =>
{
transform.DOScale(0, 0.1f).SetEase(Ease.InBack).OnComplete(() =>
{
Destroy(gameObject);
});
});
_image.rectTransform.DORotate(Vector3.zero, 0.6f).SetEase(Ease.OutQuad).SetDelay(delay);
});
}
在播放动画时希望从无到有,因此修改一下预制体的缩放属性为0,然后从小变大。
这样金币就会朝着,金币图标方向移动并消失。最后效果:
点击按钮后移动到这个位置并消失