Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
New Forum User Notice Update to the Unity Editor Software Terms

UI Builder with Tweening

Discussion in 'UI Toolkit' started by Saikodan, Nov 7, 2021.

  1. Saikodan

    Saikodan

    Joined:
    Jan 13, 2015
    Posts:
    7
    Hi,
    I'm starting to design a UI for my mobile game.
    As a part of the research, I came across the new UI builder and started watching some videos on it.

    Building UI "manually" is pretty tough for me, so I thought using the new system would be better, but it seems like the lack of tweening support is an issue there.

    Are there any alternatives? Mobile UI should feel smooth with some tween options (like "jumping" from a button or appearing on and off), and the lack of it makes the UI builder a bit... useless to me.

    Any suggestions?
     
    Saikodan, Nov 7, 2021
    #1

  2. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    386
    uMathieu, Nov 7, 2021
    #2

  3. Saikodan

    Saikodan

    Joined:
    Jan 13, 2015
    Posts:
    7
    I would really rather have some uss examples.
    Can you refer to a video guide you recommend?
     
    Saikodan, Nov 7, 2021
    #3

  4. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    529
    We don't have any video on that for now.

    As summary, you will need to define how it will be animated in the base style by defining both the property that will be animated and the duration of the transition. 

    transition-property: height, width;
    
transition-duration: 4s;


    By default, none are animated for performance consideration, and the default transition time is 0, so you really require setting both to see any effect.

    After that, changing the property (by adding removing styles, using a pseudo state like mouse over, or using an inline value) will trigger a transition.
     
    SimonDufour, Nov 10, 2021
    #4

  5. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,890
    Just click-drag a VisualElement box somewhere on the canvas.

    Create a class in the top-left called ".box" and hit enter. Select it and change the background color to blue.

    Click and drag the ".box" class onto the VisualElement, or select the VisualElement and assign the box class in the inspector on the right.

    Create a class ".box:hover", select it and change the background color to red. At the bottom, you should see Transition Animations. Set the duration to 1 second.

    Click the Preview button and it should change when you move the mouse over it.
     
    Stardog, Nov 11, 2021
    #5