1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    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 ?

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Location
    Bay Area
    Posts
    152
    Vote Rating
    1
    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.

  3. #3
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    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>

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

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi