Come posso programmare un'animazione circolare circolare come questa (immagine allegata)? Android

Question

Sto sviluppando un'applicazione & appena costruita la sua parte logica. Ora voglio progettare questo app come nei famosi esempi timer apps.for:

La cosa che voglio è il cerchio esterno che si riempie di ogni trigger di qualche evento o con incremento del numero. In realtà non so che è una parte dell'animazione (come essere costruita in flash o cosa) o semplicemente possibile tramite la codifica in Android stesso utilizzando le sue proprietà e caratteristiche incorporate. Quindi, se qualcuno mi dice quali strumenti sono usati o qualsiasi tutorial di riferimento che possa spiegare le cose dal basso. Non so davvero nulla di progettazione. Qualche codice per questo ??

Answer 1

È possibile definire un'animazione all'interno di Android, ma sarà necessario "tagliare" l'animazione in pezzi e riassemblarla mentre in Android.

http://digitaldumptruck.jotabout.com/?p=813 questo dovrebbe essere l'articolo il vostro ricerca;)

Answer 2

Abbiamo bisogno di personalizzare la barra di avanzamento con l'animazione. Segui i link per il progetto di biblioteca,

https://github.com/Todd-Davies/ProgressWheel

https://github.com/f2prateek/progressbutton , consultare il seguente link per esercitazioni

http://learnandroideasily.blogspot.in/2013/05/custom-progress-bar-in-android.html

Answer 3

http://www.sarahjustine.com/edge/

farlo in Adobe bordo ed esportarlo in PhoneGap. Costruiscilo con il divario telefonico per aggiungere i sorgenti al tuo sdk.

Answer 4

Questo farà?

Aggiornamento: Ora gestisce correttamente anche il tempo reale.

Schermata di esempio:

Codice:

import android.app.Activity; 
import android.content.Context; 
import android.os.Bundle; 
import android.os.Handler; 
import android.text.TextPaint; 
import android.view.View; 

import android.graphics.*; 


public class MainActivity extends Activity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     setContentView(new CircularCountdown(this)); 
    } 

    private static class CircularCountdown extends View { 

     private final Paint backgroundPaint; 
     private final Paint progressPaint; 
     private final Paint textPaint; 

     private long startTime; 
     private long currentTime; 
     private long maxTime; 

     private long progressMillisecond; 
     private double progress; 

     private RectF circleBounds; 
     private float radius; 
     private float handleRadius; 
     private float textHeight; 
     private float textOffset; 

     private final Handler viewHandler; 
     private final Runnable updateView; 

     public CircularCountdown(Context context) { 
      super(context); 

      // used to fit the circle into 
      circleBounds = new RectF(); 

      // size of circle and handle 
      radius = 200; 
      handleRadius = 10; 

      // limit the counter to go up to maxTime ms 
      maxTime = 5000; 

      // start and current time 
      startTime = System.currentTimeMillis(); 
      currentTime = startTime; 


      // the style of the background 
      backgroundPaint = new Paint(); 
      backgroundPaint.setStyle(Paint.Style.STROKE); 
      backgroundPaint.setAntiAlias(true); 
      backgroundPaint.setStrokeWidth(10); 
      backgroundPaint.setStrokeCap(Paint.Cap.SQUARE); 
      backgroundPaint.setColor(Color.parseColor("#4D4D4D")); // dark gray 

      // the style of the 'progress' 
      progressPaint = new Paint(); 
      progressPaint.setStyle(Paint.Style.STROKE); 
      progressPaint.setAntiAlias(true); 
      progressPaint.setStrokeWidth(10); 
      progressPaint.setStrokeCap(Paint.Cap.SQUARE); 
      progressPaint.setColor(Color.parseColor("#00A9FF")); // light blue 

      // the style for the text in the middle 
      textPaint = new TextPaint(); 
      textPaint.setTextSize(radius/2); 
      textPaint.setColor(Color.BLACK); 
      textPaint.setTextAlign(Paint.Align.CENTER); 

      // text attributes 
      textHeight = textPaint.descent() - textPaint.ascent(); 
      textOffset = (textHeight/2) - textPaint.descent(); 


      // This will ensure the animation will run periodically 
      viewHandler = new Handler(); 
      updateView = new Runnable(){ 
       @Override 
       public void run(){ 
        // update current time 
        currentTime = System.currentTimeMillis(); 

        // get elapsed time in milliseconds and clamp between <0, maxTime> 
        progressMillisecond = (currentTime - startTime) % maxTime; 

        // get current progress on a range <0, 1> 
        progress = (double) progressMillisecond/maxTime; 

        CircularCountdown.this.invalidate(); 
        viewHandler.postDelayed(updateView, 1000/60); 
       } 
      }; 
      viewHandler.post(updateView); 
     } 



     @Override 
     protected void onDraw(Canvas canvas) { 
      super.onDraw(canvas); 

      // get the center of the view 
      float centerWidth = canvas.getWidth()/2; 
      float centerHeight = canvas.getHeight()/2; 


      // set bound of our circle in the middle of the view 
      circleBounds.set(centerWidth - radius, 
        centerHeight - radius, 
        centerWidth + radius, 
        centerHeight + radius); 


      // draw background circle 
      canvas.drawCircle(centerWidth, centerHeight, radius, backgroundPaint); 

      // we want to start at -90°, 0° is pointing to the right 
      canvas.drawArc(circleBounds, -90, (float)(progress*360), false, progressPaint); 

      // display text inside the circle 
      canvas.drawText((double)(progressMillisecond/100)/10 + "s", 
          centerWidth, 
          centerHeight + textOffset, 
          textPaint); 

      // draw handle or the circle 
      canvas.drawCircle((float)(centerWidth + (Math.sin(progress * 2 * Math.PI) * radius)), 
           (float)(centerHeight - (Math.cos(progress * 2 * Math.PI) * radius)), 
           handleRadius, 
           progressPaint); 
     } 

    } 

}