Hi There,
I am trying to create an animation of a dime spinning…as if you flipped it up into the air and it was spinning.
I have my still image made, and it is placed in a video track and extended in time to 60 seconds.
I figure if I could rotate the dime vertically 180 degrees and then loop the clip or something like that, I would get the effect, but so far no luck.
Any ideas how to achieve this animation?
A step by step answer would really be appreciated.
Thank you.
JB
Hi jbsheridan
I doubt you can get a realistic result using only one image of the dime. If I had to make such an animation, I’d take multiple pictures of the dime. Like 24 shots if the video frame rate is 24 frames/sec. I’d build some device (see image bellow) where I could glue the dime vertically on it’s side on a very small dowel (maybe a toothpick or a nail), then attach the dowel on a rotating disk and write graduations on the disk (360° divided by 24 frames = 15°). Then I’d take one pic, rotate, take another pic etc…
Then I’d import each pic in Photoshop or Gimp and remove everything but the dime. Then import those 24 modified images in Shotcut and use one per frame to make a one second clip of the rotating dime.
It would just look like a dime spinning. Nothing more. It’s quite a lot of work, I agree, but I think the result would be far better than using just one image.
If you want a realistic spin you need to build something like @MusicalBox suggested. But you can do a reasonable spin with the S and P filter and key frames and some work.
You can also do it with two images (the Obverse and Reverse of the dime - mine are 220px x 220px) using my WebVfx framework (see HTML Filters: Titles, Scrolling Credits, Stopwatches, Gauges etc) and the Overlay HTML filter. If you know HTML and CSS it helps, I knocked up the code below in about half an hour.
I made a simple video of how to use this as an Overlay HTML for a 4 second clip.
The Overlay HTML code is:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Logo</title>
<style>
html, body {margin:0; padding:0; width: 100vw; height: 100vf; background-color: #000; overflow: hidden;}
#flipper {width: 220px; height: 220px; bottom: 0px; left: 500px; position: absolute;
}
#front, #back {
background-color: transparent;
width : 220px;
height : 220px;
position : absolute;
top : 0px;
left : 0px;
}
img {width: 220px; height: 220px;}
</style>
<script src='./webvfx.js'></script>
</head>
<body data-control='4:30'> <!-- 4 seconds clip at 30 fps -->>
<div id='flipper'class='webvfx' ease: 'easeInOutExp' data-animate='{
0%: {bottom: 0px;},
50%: {bottom: 400px;},
100%: {bottom: 0px;}
}'>
<div id='front' class='webvfx' ease: "easeInOutSine" data-animate='{
0%: {webkitTransform: scale(1, 1);},
5%: {webkitTransform: scale(1, 0);},
10%: {webkitTransform: scale(1, 0);},
15%: {webkitTransform: scale(1, 0);},
20%: {webkitTransform: scale(1, 1);},
25%: {webkitTransform: scale(1, 0);},
30%: {webkitTransform: scale(1, 0);},
35%: {webkitTransform: scale(1, 0);},
40%: {webkitTransform: scale(1, 1);},
45%: {webkitTransform: scale(1, 0);},
50%: {webkitTransform: scale(1, 0);},
55%: {webkitTransform: scale(1, 0);},
60%: {webkitTransform: scale(1, 1);},
65%: {webkitTransform: scale(1, 0);},
70%: {webkitTransform: scale(1, 0);},
75%: {webkitTransform: scale(1, 0);},
80%: {webkitTransform: scale(1, 1);},
85%: {webkitTransform: scale(1, 0);},
90%: {webkitTransform: scale(1, 0);},
95%: {webkitTransform: scale(1, 0);},
100%: {webkitTransform: scale(1, 1);}
}'>
<img src='Dime_Obverse.png'>
</div>
<div id='back' class='webvfx' data-animate='{
0%: {webkitTransform: scale(1, 0);},
5%: {webkitTransform: scale(1, 0);},
10%: {webkitTransform: scale(1, 1);},
15%: {webkitTransform: scale(1, 0);},
20%: {webkitTransform: scale(1, 0);},
25%: {webkitTransform: scale(1, 0);},
30%: {webkitTransform: scale(1, 1);},
35%: {webkitTransform: scale(1, 0);},
40%: {webkitTransform: scale(1, 0);},
45%: {webkitTransform: scale(1, 0);},
50%: {webkitTransform: scale(1, 1);},
55%: {webkitTransform: scale(1, 0);},
60%: {webkitTransform: scale(1, 0);},
65%: {webkitTransform: scale(1, 0);},
70%: {webkitTransform: scale(1, 1);},
75%: {webkitTransform: scale(1, 0);},
80%: {webkitTransform: scale(1, 0);},
85%: {webkitTransform: scale(1, 0);},
90%: {webkitTransform: scale(1, 1);},
95%: {webkitTransform: scale(1, 0);},
100%: {webkitTransform: scale(1, 0);}
}'>
<img src='Dime_Reverse.png'>
</div>
</div>
</body>
</html>My method look kinda primitive compared to your stuff guys 
Maybe so, but I love the idea of stop motion animation for this. It might actually be better. The problem with Sauron’s and my methods is that the coin has zero thickness. I can solve this in a modern browser e.g. Chrome, but not for the weblkit engine that is used in Shotcut-MLT.
With my method, if you want the coin to loop around in the air like @Elusien’s demo it’ll need a lot of key frame work and much math to get it to work. I don’t even want to try it.
sauron, but couldn’t you first export the video of just the coin spinning then use keyframes on that file to make it look like it moves up and down ?
This topic was automatically closed after 90 days. New replies are no longer allowed.
