UT PREP CS Lesson Plan 3
A-Frame Animations and VR Project Creation
Sponsored by Mozilla Gigabit
Time: 75 minutes
Code Academy has lessons over html basics that will help you with the syntax of the language. If you have trouble understanding why we write the way we do or you want to be able to help kids faster this is recommended.
A frame has its own tutorial that will teach you the basics of syntax and the concepts of inserting and manipulating entities. This is required as you will need to learn these tools to teach these lessons and be helpful in the classroom. Use codepen throughout this tutorial to do the actual coding.
These will be used extensively in the lessons so you need to be familiar with them. Please read through each. This lesson focuses on animations as well as the previously covered topics. Make sure to understand each animation type to facilitate with this lesson. An example animation can be added to your previous example outside of class and shown in class for demonstration.
Engage 1 (10 min):
Last time, we learned the basics about HTML and how to use them to add shapes to our VR space. Today, before we continue working on our project, we are going to learn how to animate those objects.
Pull up your project with an animated attribute and show them the code. For our example we will be using a bouncing basketball. This is the link. https://thimbleprojects.org/bandreasv/227682/
The tag for an animation is <a-animation></animation>. In here, I animated my basketball. Where did I place the animation tag in relation to my sphere?
“It is between the opening and closing tag of the sphere”
That’s right!. The animation tags go in between the opening and the closing tag of the shape you want to animate. What attributes do you see on the animation tag?
“Attribute, From, Dur, To, Direction, Repeat”
Normal direction means the attribute changes from the from attribute to the to attribute values.
Reverse direction means the attribute changes from the to attribute to the from attribute values.
Alternate direction means the first time it does a normal direction and then a reverse direction and alternates between the two.
What do you think alternate-reverse does?
It starts with a reverse direction and then does normal and direction alternates between the two!
Now open up your project.
With your partner. Choose a shape that you already have on your screen to animate.
Give them about 5 minutes to do this. Leave your example up on the screen as reference.
Ok. What were some of the things you animated? Go around the pairs so that other groups get ideas for their projects.
Explore part 1 (60 min):
For the rest of the class you will work on your project. On the screen you will see a timer. Every 10 minutes. The driver and the navigator will change rolls. If you have any questions on how to do something, ask the team next to you. If you don’t know the answer, raise your hand and a teacher will come help you.
Remember to test your code on your phone every 10 minutes or so. Make sure to click on Unpublish button and then Publish again to save your work. It will always give you a different URL link. Also use the A-Frame website as reference of tags and attributes you can utilize.
Walk around the classroom answering student questions.
Elaborate (5 min):
If kids are interested in doing different kinds of animation demonstrate the below
So there are two secret kinds of animation that are scaling and rotation. They’re inserted the same way as moving is, right inside the variable you want to animate. There is very little to difference between the two codes, I’ve posted both below to display the similarities.
<a-animation attribute="rotation" from="20 0 0" to="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"> </a-animation>
<a-animation attribute="scale" to="1 0.5 1" direction="alternate" dur="2000" repeat="indefinite" easing="linear"> </a-animation>
Try experimenting with the values to see what each do.
Explain (5 min):
Come back together as a class.
Ok. You should be close to finishing on your project. Next class you will only have 20 minutes to make final touchups. What were some challenges that you faced? How did you solve them?
Go around the class with different teams asking them that question. This might help other students that are struggling with the same problem.HW: They can go home and continue working on their project at home.