1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    6
    Vote Rating
    0
    antiv_boy is on a distinguished road

      0  

    Default Access animation content from a database

    Access animation content from a database


    hi,
    I have an app am designing in which am using ext js4. I would like to incorporate sencha animations in it. The animation would basically be a set of links that when clicked, would change the content of a timeline object to reflect the new item.
    I would like the animation to fetch this data from a database. Anyone with a database based animation example, or knows how i can achieve this will be appreciated. Rgds. Nikk

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    272
    Vote Rating
    23
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    One way you could do this is create a new animation project with 1 scene, 1 timeline for each keyframe animation that you want to save to the database. After you export the project, open the html file and locate keyframes. You should save the keyframe data to the database. You can repeat this until you create all animations that you need.

    While technically you could also do this with a single project with multiple scenes and timelines, finding the correct keyframe info in the html file will be much more complicated.

    Because Animator auto-generates identifiers for the objects to prevent conflicts, when copying the keyframe data you should make sure that all the ids correspond to the objects in your scene where you want to apply the keyframes.

    Hope this helps a little.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    6
    Vote Rating
    0
    antiv_boy is on a distinguished road

      0  

    Default


    I alreadyhave the data stored in a db. I would like to simply pull it out of there and display. As per your response, does it mean i have to create an animation for each and every option available and post it back to the db? Then how do i show it back on the page i.e. how do i link the animation content (saved on db) with the links on the page (also saved on db)? Thanks.

  4. #4
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    272
    Vote Rating
    23
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    What kind of data do you have stored in the database?

    ---

    If you have keyframe data in the database, such as:

    Code:
    @keyframe my-animation-spin {
      from: {
          transform: rotate(0deg);
      }
      to: {
          transform: rotate(360deg);
      }
    }
    Then on your link-click you should execute a JS function that will fetch the data from your database and apply the animation on the correct element by setting its keyframe css with javascript:

    Code:
    var myKeyframes  = ... //fetch from database
    
    //assigning keyframes will cause the animation to run
    document.getElementById('myElementId').style.animationName = myKeyframes;
    Pay attention that you will need to do this for all prefixes to support all the browsers (-webkit and -moz)

    You can create above code as an action tied to a click inside Animator, or you can edit your file / page after export manually.

    My previous post was mainly explaining how to extract @keyframe data to put in your database.

Thread Participants: 1

Tags for this Thread