PDA

View Full Version : Iphone Delete Icon Effect



tomalex0
7 Dec 2010, 11:23 PM
Hi

I was trying to implement effect like

http://stripedcow.com/articles/css3-jquery-iphone-delete-wiggler/ using animator.

I tried a simple way and it work somewhat, but not looking smooth.


This is how code looks





<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>wiggle &middot; Made with Sencha Animator</title><style type="text/css">
#AN-sObj-stage {
position: relative;
overflow:hidden;
-webkit-perspective: 600;
}
#AN-sObj-stage div { position: absolute; }
#AN-sObj-stage a {color: inherit; text-decoration:none;}
#AN-sObj-stage * {margin:0; padding:0;-webkit-transform-style:preserve-3d;}
body,#AN-sObj-stage {margin:0; padding:0;}
#AN-sObj-stage{ width: 480px;
height: 320px;
border-color: black;
}
#AN-sObj-1{ width: 64px;
height: 64px;
top: 110px;
left: 212px;
-webkit-animation-iteration-count: 200;
}
#AN-sObj-2{ top: 57px;
left: 7px;
}
#AN-sObj-3{ top: 20px;
left: 20px;
}

@-webkit-keyframes AN-ani-0 {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-5deg);

-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(5deg);

-webkit-animation-timing-function: ease-in;
}
}
</style>

</head>
<body>
<div id="AN-sObj-stage"><div class="AN-Object" id="AN-sObj-1" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(5deg); -webkit-animation-timing-function: ease-in; -webkit-animation-name: AN-ani-0; -webkit-animation-duration: 0.2s; "><div id="AN-sObj-val-1"><img src="assets/Camera.png"></div><div id="AN-sObj-2" class="AN-Object"><span id="AN-sObj-val-2">Camera</span></div></div></div></body>
</html>


How can i make the animation smooth ?

mmullany
16 Dec 2010, 2:19 PM
I would add a lot more keyframe repetition into the main animation. Using iterations to repeat very short animations can be quite choppy since the animation start/end boundary can introduce a stutter.

tomalex0
7 Jan 2011, 3:58 AM
I tried something like this, now it looks better, but have to do something the with the text.
Thanks for your suggestion



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>wiggle &middot; Made with Sencha Animator</title><style type="text/css">
#AN-sObj-stage {
position: relative;
overflow:hidden;
-webkit-perspective: 600;
}
#AN-sObj-stage div { position: absolute; }
#AN-sObj-stage a {color: inherit; text-decoration:none;}
#AN-sObj-stage * {margin:0; padding:0;-webkit-transform-style:preserve-3d;}
body,#AN-sObj-stage {margin:0; padding:0;}
#AN-sObj-stage{ width: 480px;
height: 320px;
border-color: black;
}
#AN-sObj-1{ width: 64px;
height: 64px;
top: 110px;
left: 212px;
-webkit-animation-iteration-count: infinite;
}
#AN-sObj-2{ top: 57px;
left: 7px;
}
#AN-sObj-3{ top: 20px;
left: 20px;
}

@-webkit-keyframes AN-ani-0 {
from{
-webkit-transform: rotate(3deg);

-webkit-animation-timing-function:linear;
}
50% {
-webkit-transform: rotate(-3deg);

-webkit-animation-timing-function: linear;
}
to {
-webkit-transform: rotate(3deg);

-webkit-animation-timing-function: linear;
}
}



</style>

</head>
<body>
<div id="AN-sObj-stage"><div class="AN-Object" id="AN-sObj-1" style="-webkit-transform: rotate(0deg); -webkit-animation-timing-function: linear; -webkit-animation-name: AN-ani-0; -webkit-animation-duration: 0.2s; ">
<div id="AN-sObj-val-1"><img src="assets/Camera.png"></div><div id="AN-sObj-2" class="AN-Object"><span id="AN-sObj-val-2">Camera</span></div></div></div></body>
</html>