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 - Management Team
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar