Icon Animation

Base State And State

• Base State: A base state refers to the initial or default state of an object before any changes or animations are applied.
• State: A state is a specific setup that defines how an object looks or behaves at a particular time. It can include changes in size, position, color, and more.

State-based animation lets you create and switch between different setups (states) for an object to see how it changes over time.

Events And **Interactivity**

Spline's interactive events can turn your static 3D designs into dynamic, responsive experiences. These events, which respond to user inputs and environmental triggers, offer a versatile toolkit for creating engaging scenes. Let's explore each of these events and their functions in detail.

Start Event

The Start event is triggered when the Spline scene is loaded. It's often used to initiate an animation or action, such as rotating an object, as soon as the scene opens.

Mouse Events

Mouse events are set off by user mouse interactions. They include:

• Mouse Up: Triggered when the user releases the mouse button. It can be used to halt an action initiated by a Mouse Down event.
• Mouse Down: Activated when the user presses the mouse button. It typically starts an interaction, like dragging an object.
• Mouse Press: Triggered when the user clicks (presses and releases) the mouse button. Commonly used for actions like opening a link or toggling an animation.

Key Events

Key events are activated by user keyboard interactions and consist of:

• Key Up: Triggered when the user releases a key. Often used to stop an action initiated by a Key Down event.
• Key Down: Activated when the user presses a key. Commonly used to start an interaction, like moving an object.
• Key Press: Triggered when the user presses and releases a key. Typically used for actions like toggling an animation or changing a scene.

Scroll Event

The Scroll event is triggered when the user scrolls on the scene. It can create parallax animations or control an animation based on the scroll position.

Look At Event

The Look At event is activated when the camera's view direction intersects with a specific object. You can use it to create experiences where objects react when looked at or when they enter the camera's field of view.

Follow Event

The Follow event allows an object to follow another object's path or location in the scene. This event is useful for creating guided animations or for objects that need to maintain a specific relation to another object.

Game Controls Event

Game Controls events are triggered by user interactions similar to those in video games. For example, you can create an event that moves an object forward when the "W" key is pressed, or rotates an object when the arrow keys are pressed.

Conditional Logic Event

Conditional Logic events allow actions to occur based on certain conditions. For example, an animation might only play if an object is in a specific location, or a sound might play if an object collides with another object.

Collision Event

Collision events are triggered when two objects in the scene collide or intersect. This is useful for creating realistic interactions between objects, such as bouncing, breaking, or changing direction upon collision.

Variable Change Event

Variable Change events trigger when a defined variable changes its value. This event allows you to create actions based on the state of your variables, enabling more complex and dynamic interactions.

Set Variable Event

The Set Variable event allows you to change the value of a defined variable. This event can be used in conjunction with Variable Change events to control the flow of your scene based on variable states.

Actions

In Spline, actions are the responses to events. They allow you to create dynamic and interactive designs by defining what happens when an event occurs. Let's explore each of these actions, their functionality, and how they can enrich your 3D designs.

Transition Action

Transition action is used to smoothly change property values of an object over time. It allows you to animate properties like position, scale, rotation, color, and opacity.

Sound Action

Sound action is used to play a sound file in response to an event. It can be used to enhance the user experience by adding audio feedback to interactions.

Video Action

Video action is used to control video playback. It can play, pause, or stop a video, or even change the current time of the video in response to an event.

Open Link Action

Open link action opens a URL in a new browser tab. It's typically used to navigate the user to a different webpage or to download a file.

Reset Scene Action

Reset scene action resets the scene to its initial state. It can be useful in situations where you want to give the user the ability to start over.

Create Object Action

Create object action dynamically adds a new object to the scene. This can be used to create interactive experiences where objects appear in response to user actions.

Scene Transition Action

Scene Transition action is used to transition from the current scene to a different scene. It's often used in multi-scene projects to navigate between different scenes.

Animation Action

Animation actions are used to trigger animations on objects that have been previously imported as animated objects. This means you need to import an animated object first before you can use animation actions.

Set Variable Action

Set variable action changes the value of a defined variable. This can be used in conjunction with variable change events to create complex interactions based on the state of your variables.

Animating the Sun

The first step is to animate the sun. We're going to create a simple rotation animation.

📔 Please proceed from the previous section on Weather Icon and Sculpting. Alternatively, you can download the content from the link provided.

Creating States

• Navigate to the States panel on the right sidebar.
• Click on the plus icon to add a new state.
• In the Transform panel, set the Y rotation to 360 degrees.

Setting Up Events

• Go to the Event panel, then click on the plus icon to add an event.
• Choose Start for the event type.

Defining Actions

• For the action, click on the plus icon to add a new action.
• Choose Transition.
• In the Target dropdown, choose Sphere.
• Set Transitions 1 to Base State and Transitions 2 to State.
• Set the animation to Ease In Out, with a duration of 4 seconds.
• Set the sequence to Loop Infinity.

Animating the Sunbeam

Next, we will animate the sunbeam. Select the cylinder representing the sunbeam to start.

Creating States

• Navigate to the States panel on the right sidebar.
• Click on the plus icon to add a new state.
• Switch back to the Base State, then go to the Cloner panel.
• Change End to 0.
• Switch back to State, then go to the Cloner panel.
• Change End back to 360.
• Add a third state.
• Change the Z value to -360.

Setting Up Events

• Go to the Event panel, then click on the plus icon to add an event.
• Choose Start for the event type.

Defining Actions

• For the action, choose Transition.
• In the Target dropdown, choose Cylinder.
• Set Transitions 1 to Base State and Transitions 2 to State.
• Set the animation to Ease In Out, with a duration of 1 second.
• Set the sequence to Loop None.
• Click on the plus icon to add a new action.
• Choose Transition.
• In the Target dropdown, choose Cylinder.
• Set Transitions 1 to State and Transitions 2 to State 2.
• Set the animation to Ease In Out, with a duration of 4 seconds, and Loop None.
• Set the sequence to Delay 1 Second, and Loop Infinity.

Animating the Cloud

Next, we will animate the cloud layer to give it a floating effect.

Creating States

• Navigate to the States panel on the right sidebar.
• Click on the plus icon to add a new state.
• Go to the Material panel and change the Displace settings.
• Set Scale to 10 and Movement to 6.
• Set Offset to X -43, Y 30, Z 10, and Intensity to 18.

Setting Up Events

• Go to the Event panel, then click on the plus icon to add an event.
• Choose Start for the event type.

Defining Actions

• For the action, choose Transition.
• In the Target dropdown, choose Cloud.
• Set Transitions 1 to Base State and Transitions 2 to State.
• Set the animation to Ease In Out, with a duration of 6 seconds.
• Set the sequence to Loop Infinity, and Cycle to Ping Pong Reverse.

Animating the Raindrop

Now that we have our sun, the final touch to our 3D weather icon is animating a raindrop. Here's how to create and animate the raindrop.

Setting up the Raindrop

We will work on one single cylinder.

• Select the cylinder layer.
• Move the raindrop and make sure that the raindrop is inside the cloud.
• Change the Z rotation to 45.
• Hide the cloud layer for better visibility.

Creating States

• Navigate to the States panel on the right sidebar.
• Click on the plus icon to add a new state.
• Select the green arrow and move it down about 50 units.
• Go to the Material property and detach it.
• Set all layers to 0 opacity.

Setting Up Events

• Go to the Event panel, then click on the plus icon to add an event.
• Choose Start for the event type.

Defining Actions

• For the action, choose Transition.
• In the Target dropdown, choose Raindrop.
• Set Transitions 1 to Base State and Transitions 2 to State.
• Set the animation to Ease Out, with a duration of 1 second.
• Set the sequence to Loop Infinity.

Duplicating the Raindrop

Creating multiple raindrops can give the animation a more realistic feel. Here's how to duplicate our animated raindrop.

• Use the Cloner to duplicate the raindrop.
• Go to the Cloner panel.
• Set the Type to Linear and Base to Hidden.
• Set the Count to 4.
• Set the Position to X 21, Y -21, Z 0.
• Click "Convert to Instances". This will create a component and its instances. 📔 Please note that your design and positioning may differ from mine. Adjust accordingly to suit your preferences and requirements.

Finally, let’s add some delay for the raindrop.

• Select the cylinder inside the group to change the animation.
• Cylinder 1: Delay none.
• Cylinder 2: Delay 0.40.
• Cylinder 3: Delay 0.2.
• Cylinder 4: Delay 0.8.

Conclusion

And there you have it! You've just created a 3D weather icon using Spline. The animation brings the icon to life, making it more engaging and interactive for users. Remember, 3D and animation are powerful tools in UI design, and with Spline, the possibilities are limitless. Happy designing!