circle-animation-gist.js

var viewModule = require("ui/core/view");
var imageModule = require("ui/image");
var absoluteLayoutModule = require("ui/layouts/absolute-layout");

var page;
var id;
var timer = require("timer");
var face;
var deviceimg;
var angle = 0;
var radius = 50;

exports.loaded = function(args) {
  page = args.object;
  
  // We need an absolute layout to allow us free placement of our animated item
  // Then we add that to our xml view "main-layout"
  face = new absoluteLayoutModule.AbsoluteLayout();
  viewModule.getViewById(page, "main-layout").addChild(face);
  
  // I'm using an animated Image but you can use a label or whatever if you want
  deviceimg = new imageModule.Image();
  
  // Here we set the initial placement of our image
  absoluteLayoutModule.AbsoluteLayout.setLeft(deviceimg, 150);
  absoluteLayoutModule.AbsoluteLayout.setTop(deviceimg, 245);
  
  // I have my source image in a directory I created in the apps folder /app/images/
  deviceimg.src = "~/images/babyblue-sess.png";
  
  // Now add the image to our absolute layout
  face.addChild(deviceimg);
  
  // In order to make it animated we set an interval for every 1 second
  // So every second our animation moves a frame, you can make this shorter
  id = timer.setInterval(function(){

    // Here we set the circle calculation for our movement, the "angle" changes each frame
    var x = (radius * Math.cos(angle * Math.PI / 180)) - 50;
    var y = radius * Math.sin(angle * Math.PI / 180);
    
    // took make it smooth the duration is the same as our interval timing
    deviceimg.animate({
        translate: { x: x, y: y },
        duration: 1000
    });

    // The angle increment amount here is what decides the speed per frame it moves
    // It is best to keep this divisible by 360 for fluid results, we reset every full circle
    angle+=40;
    if(angle > 360) {
        angle = 0;
    }
    // Notice our interval is 1000ms (1 second) just like our duration of animation
  }, 1000);
}