Giter Club home page Giter Club logo

unity-animationui's Introduction

Logo

AnimationUI

AnimationUI is a unity tool to create UI animation easily with no code. You can simply drag and drop to create some smooth UI animation. There are some option that you can set such as the easing, duration, etc. It basically consist of a component that has an array of sequence that has an array of task. This may be special for UI, but it's also possible to animate values for non UI component like transform. You can also make a custom sequence for non UI component with UnityEvent including the dynamic one. Adding function to call at certain time or at the end of animation is also possible with code.

๐Ÿ•น๏ธ Demo Preview

โœจ Features

  • Sequence for Animating values of RectTransform, Image, Camera, CanvasGroup, Transform, and Dynamic UnityEvent.
  • Sequence for instant method such as Set Active All Input, Play SFX, Wait before executing next sequence, Set Active GameObject, Loading scene, and UnityEvent
  • Preview animation in edit mode with Progress bar both globally and in each sequence.
  • Reorderable sequences.
  • Addable function to call at the end of animation or at certain determined time.
  • Public variables for every sequence.
  • Custom ButtonUI as bonus.
  • Demo.
  • Others.

๐Ÿ“˜ Instruction

Instruction 1

  • Right click -> UI -> Create AnimationUI, or you can just add the AnimationUI Component to a gameObject
  • Choose the kind of sequence you want.
  • If you choose animation, assign the kind of component you want to animate to the inspector of the AnimationUI component.

Instruction 2

  • It's recomended to to to lock the inspector so that animating the values is easier.
  • You can capture the start values by clicking the set start button.
  • You can also capture the end value by changing the value, then clicking the set end button.

Instruction 3

  • Drag the progress bar to see how would the animation look like.
  • You can also play the animation in edit mode, but make sure the scene view is open or the animation might have some lag.

Instruction 4

  • Try looking at the demo for examples. But make sure the "Level1" scene is added in the build settings or you can't load the "Level1" scene
  • There are also progress bars for eace sequence in the left side of the sequence.

Instruction 5

  • Try comparing the upgrade menu and the settings menu of the demo.
  • Notice that those settings position is always relative to the left side or the right side, but then it becomes relative to the middle of the screen.
  • In the upgrade menu of the demo, there's also a similiar scenario with the settings menu.
  • if you're not sure how to create this, you can always capture all variable with the set start or the set end button. One example is when you want to animate Rect Transform with Anchor Presets of stretch. just try enabling all variable and set everything, you might be able to produce a similiar result with the settings or upgrade menu in the demo.

Instruction 6

  • You can create the animation in a short time by utilizing some tricks with Unity built in list in the inspector. For example adding a new sequence will automatically copy the previous, it can be quick if the sequence is similiar with the other. Or doing something like creating many copies of wait sequence before using them.

Instruction 7

  • With this tool, you can also create sequence that set active all input, play sfx, wait before executing next sequence, set active gameObject, loading scene, and do custom things with UnityEvent with each of them having different color.

๐Ÿ” API Reference

Get the reference by

AnimationUI _animationUI;
_animationUI.MyMethodName();

๐Ÿ”— Syntax

Method Description
Play() Play the animation
PlayReversed() Play the animation but reversed. Usefull to go back from a certain menu quickly.
AddFunctionAt(float time, delegate func) Add a function to be called at a certain time after the AnimationUI.Play() is called
AddFunctionAtEnd(delegate func) Add a function to be called when the latest wait sequence is finished. It's intended like this so that you also have an option for this case and not just at the very end of the whole sequences. If you want to make it get called at the end of the whole sequences, you can either call AddFunctionAt(_animationUI.TotalDuration, func) or just add another wait sequence as the last sequence in the inspector

Most of the variable in the Sequence class is modifiedable, so it's possible to change the values of _animationUI.AnimationSequence[MyIndex].MyVariableName on runtime.

๐Ÿ“– Examples

Play the animation, call LoadSceneWithLoadingBar() after animation finished.

_animationUI.AddFunctionAtEnd(LoadSceneWithLoadingBar);
_animationUI.Play();

๐Ÿ“ƒ Note

  • There's a bonus component for ButtonUI
  • There's also reverse sequence button usefull to go back from other menu.
  • Make sure to press the preview start because you may accidentally do something like disabling all input
  • Theres progress indicator individually in the left side of the sequences.
  • Toggling PlayOnStart to true is usefull for transition to a new scene.
  • Make sure the Singleton prefab exist in the resources folder. Don't move it outside.
  • There's still no proper way to disable all input so if you also want to disable input other than mouse and touch, please modify line 9, 14, and 19 of Customizable.cs
  • readme to explain others category for custom button demos, etc.

๐Ÿ“ License

MIT

unity-animationui's People

Contributors

dhafinfawwaz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.