UGUI動畫效果
新增流光效果
建立兩個圖片,父物體白圖,子物體流光特效
子圖片編寫指令碼
publicclassEffect01 : MonoBehaviour {
publicSprite[] sprites;
privateImage bgImage;
// Use this for initialization
void Start () {
Array.Sort(sprites, (x, y) => { return x.name.CompareTo(y.name); });
bgImage = GetComponent<Image>();
}
float count = 0;
int index = 0;
// Update is called once per frame
void Update () {
count++;
if (index == sprites.Length -1)
{
index = 0;
}
else
{
index++;
}
bgImage.sprite = sprites[index];
count = 0;
}
}
給子物體插入圖片時右上角上鎖,插入十六張圖片,執行後顯示流光圖
買裝備時裝備明暗變化即購買過程變化
建立一個Button按鈕,插入精靈圖片,Reset初始化,建立一個圖片作為子物體,插入Button中插入的圖片,顏色調灰一點,透明度調第一半,Fill Origin調成Top
publicclassCDEffect : MonoBehaviour {
publicfloat leftTime;
publicfloat totalTime;
privateImage effectImage;
privateButton cdButton;
// Use this for initialization
void Start () {
effectImage = transform.FindChild("Image").GetComponent<Image>();
leftTime = totalTime;
cdButton = transform.GetComponent<Button>();
cdButton.interactable = false;
}
// Update is called once per frame
void Update () {
leftTime -= Time.deltaTime;
if (effectImage.fillAmount > 0)
{
effectImage.fillAmount = leftTime /totalTime;
}
else
{
effectImage.fillAmount = 0;
cdButton.interactable = true;
}
}
publicvoid FireSkill()
{
Debug.Log("技能使用了");
leftTime = totalTime;
cdButton.interactable = false;
}
}
調整一下兩個圖片的透明度,在Button按鈕中的Button元件中最下面On Click外掛,點選加號,左上角的不用動,左邊插入按鈕,右面選擇CDEffect 然後選擇FireSkill;
給物體新增動畫
① 右鍵Assets 建立一個Animation
② 建立一個立方塊,掛載Animation元件,元件中Animation項載入剛建立的動畫,size改為1,Element載入動畫
③ 選中立方塊,ctrl+6,creat按鈕儲存動畫,Add Propert——Transform——position控制物體的移動
④ 右上角鎖後面選單改成Debug Animation中Legacy對勾點上,顯示元件中沒有的項
注:position裡的豎排點可以移動調整速度。
相關文章
- jQuery 效果 – 動畫jQuery動畫
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- JS動畫效果——多物體動畫JS動畫
- jQuery 效果 – 停止動畫jQuery動畫
- 萬彩動畫大師教程 | 新增動畫效果動畫
- JavaScript 簡單動畫效果JavaScript動畫
- vue-lottie動畫效果Vue動畫
- SVG 漸變動畫效果SVG動畫
- 卡片旋轉動畫效果動畫
- Java 給PPT新增動畫效果(預設動畫/自定義動畫)Java動畫
- Flutter抖動動畫、顫抖動畫、Flutter文字抖動效果Flutter動畫
- JavaScript簡單的動畫效果JavaScript動畫
- 頁面旋轉動畫效果動畫
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- Vue 常用 transition 動畫效果記錄Vue動畫
- 前端基礎-jQuery的動畫效果前端jQuery動畫
- CSS3動畫按鈕效果CSSS3動畫
- Flutter動畫實現粒子漂浮效果Flutter動畫
- Flutter “孔雀開屏”的動畫效果Flutter動畫
- iOS動畫-擴散波紋效果iOS動畫
- css3動畫效果抖動解決CSSS3動畫
- 分享一個簡單的畫刷動畫效果:?️BrushEffect動畫
- 萬彩動畫大師教程 | 增加滑入等進場動畫效果動畫
- 萬彩動畫大師教程 | 如何給物件新增浮動的動畫效果動畫物件
- 萬彩動畫大師教程 | 如何給字型新增抖動的動畫效果動畫
- CSS3圖片上下動畫浮動效果CSSS3動畫
- CSS動畫效果——語音播放小喇叭CSS動畫
- 加入購物車動畫效果實現動畫
- canvas模擬eharts首頁動畫效果Canvas動畫
- 滑鼠懸浮連結動畫高亮效果動畫
- 5分鐘學會Vue動畫效果Vue動畫
- CSS3 loadding載入動畫效果CSSS3動畫
- CSS3載入等待動畫效果CSSS3動畫
- JavaScript教程全套影片合集:DOM動畫效果JavaScript動畫
- Flutter 類抽屜效果動畫實現。Flutter動畫
- Flex的動畫效果與變換!(二)Flex動畫
- Flutter 動畫曲線Curves 效果一覽Flutter動畫
- CSS 滑鼠懸浮動畫暫停效果CSS動畫
- Web 頁面如何實現動畫效果Web動畫