1. 7 Dec 2010 11:23 PM #1
    tomalex0
    tomalex0 is offline
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    India, Kerala, Cochin
    Posts
    581
    Vote Rating
    10
    tomalex0 will become famous soon enough
      0  

    Default Iphone Delete Icon Effect

    Iphone Delete Icon Effect


    Hi

    I was trying to implement effect like

    http://stripedcow.com/articles/css3-...elete-wiggler/ using animator.

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


    This is how code looks


    Code:
    <!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 ?
    Reply With Quote Reply With Quote
  2. 16 Dec 2010 2:19 PM #2
    mmullany
    mmullany is offline
    Sencha - Management Team
    Join Date
    Mar 2010
    Location
    Bay Area
    Posts
    150
    Vote Rating
    0
    mmullany is on a distinguished road
      0  

    Default


    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.
    Reply With Quote Reply With Quote
  3. 7 Jan 2011 3:58 AM #3
    tomalex0
    tomalex0 is offline
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    India, Kerala, Cochin
    Posts
    581
    Vote Rating
    10
    tomalex0 will become famous soon enough
      0  

    Default


    I tried something like this, now it looks better, but have to do something the with the text.
    Thanks for your suggestion

    Code:
    <!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>
    Reply With Quote Reply With Quote

Similar Threads

  1. icon on iphone for a web application
    By jadhavjyoti in forum Sencha Touch 1.x: Discussion
    Replies: 12
    Last Post: 26 Jan 2012, 5:03 AM
  2. [OPEN-84] Button and Icon render-bug on Iphone
    By crp_spaeth in forum Sencha Touch 1.x: Bugs
    Replies: 7
    Last Post: 28 Oct 2010, 6:02 PM
  3. Need Help in creation of Icon in a scrolable page for Iphone
    By srinivasm22 in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 3 Sep 2010, 9:03 PM
  4. Need Help in creation of Icon in a scrolable page for Iphone
    By srinivasm22 in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 3 Sep 2010, 10:20 AM