2014-02-27 4 views
1

나는 애니메이션 효과를 준비하고 싶습니다. 그림을 보여줍니다. enter image description here 이 점선으로 된 원을 만드는 데 관심이 있습니다.이 점선 원은 점점 커지고 결국 커져야하며, 원은 사라져야합니다. 그래서이 화면에서와 같이 보일 것입니다. 리플 효과 같은 것입니다어떻게 움직이는 파급 효과가 있습니까?

지금은 코드가 커지면서 커질 수있는 새로운 원을 작성한 다음이 원 대신 점선으로 표시된 원을 사용하고 싶습니다.

이 내 코드 threadclass입니다 : 무승부, 나는 5 선

public class PanelForCanvas extends SurfaceView implements SurfaceHolder.Callback { 

private CanvasThreadForCanvas canvasthread; 

public PanelForCanvas(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    getHolder().addCallback(this); 
    canvasthread = new CanvasThreadForCanvas(getHolder(),this); 
    setFocusable(true); 
} 

@Override 
public void surfaceChanged(SurfaceHolder holder, int format, int width, 
     int height) { 


} 

@Override 
public void surfaceCreated(SurfaceHolder holder) { 
    canvasthread.setRunning(true); 
    canvasthread.start(); 

} 

@Override 
public void surfaceDestroyed(SurfaceHolder holder) { 
    boolean retry = true; 
    canvasthread.setRunning(false); 
    while(retry) 
    { 
     try 
     { 
      canvasthread.join(); 
      retry = false; 
      canvasthread.setRunning(false); 
     } 
     catch(InterruptedException e) 
     { 

     } 
     catch(NullPointerException e) 
     { 

     } 
    } 

} 


int radiusOfCircle =50; 
boolean circleend = false; 


//set of values for every line in the animation 
//so we'll see 4 line in one moment 
// for first line 
Paint line1; 
float levelOfAlpha1 =255; 

int line2luncher=0; 

// for second line 
Paint line2; 
float levelOfAlpha2 =255; 
int line3luncher=0; 


//for third line 

Paint line3; 
float levelOfAlpha3 =255; 
int line4luncher=0; 


// for fourth line 
Paint line4; 
float levelOfAlpha4 =255; 
int line5luncher=0; 

// for second line 
Paint line5; 
float levelOfAlpha5 =255; 



@Override 
protected void onDraw(Canvas canvas) { 
    Paint paint = new Paint(); 

    Paint linePaint = new Paint(); 


    //Bitmap kangoo = BitmapFactory.decodeResource(getResources(),R.drawable.bccb3e123050fb9165ee8a91c447bcf3); 
    canvas.drawColor(Color.WHITE); 



    // need to add this style when you need to draw f.example 
    // circle without filling it 

    circleend = true; 
    linePaint.setStyle(Paint.Style.STROKE); 

    linePaint.setStrokeWidth(5); 


    // give for every line color/style/ Stroke 
    line1 =line2= line3 =line4 =line5 = linePaint; 

    // the part where we animating fade lines 
    // drawing this circle line 

    // first line 

    if(circleend == true) 
    { 
     // levelOfAlpha1 is set on the begining to 255, which 
     // means that it will be full colorer, as much as levelOfAlpha1 is 
     // decreasing as much the color became more transparently 
     // so if the level is set to 0 we didn't see any color in this 
     // place 
     line1.setColor(Color.argb((int) levelOfAlpha1, 135, 206, 250)); 
     canvas.drawCircle(1300, 0, 150, line1); 

     // -3.4 is taken from calculation 
     // 255 is max, we want to get the 0 during 
     // one cycle of circle growth, 
     // the loop must be made 75 times to make circle 
     // growing from min to max 
     // so 255/ 75 = 3.4 
     if(levelOfAlpha1==0) 
     { 
      levelOfAlpha1=255; 
     } 
     else 
     { 
      levelOfAlpha1-=3.4; 
      //after 5 cycles line luncher will be 5 
      //which lunch the animation of second line 
      if(line2luncher!=20){ 
       line2luncher++; 
      } 


     } 

    } 

    if(line2luncher==20) 
    { 
     //this same as for first line 
     line2.setColor(Color.argb((int) levelOfAlpha2, 135, 206, 250)); 
     canvas.drawCircle(1300, 0, 175, line2); 

     if(levelOfAlpha2==0) 
     { 
      levelOfAlpha2=255; 
     } 
     else 
     { 
      levelOfAlpha2-=3.4; 
      if(line3luncher!=20){ 
       line3luncher++; 
      } 
     } 
    } 

    if(line3luncher==20) 
    { 
     //this same as for first line 
     line3.setColor(Color.argb((int) levelOfAlpha3, 135, 206, 250)); 
     canvas.drawCircle(1300, 0, 200, line3); 

     if(levelOfAlpha3==0) 
     { 
      levelOfAlpha3=255; 
     } 
     else 
     { 
      levelOfAlpha3-=3.4; 
      if(line4luncher!=20){ 
       line4luncher++; 
      } 
     } 
    } 

    if(line4luncher==20) 
    { 
     //this same as for first line 
     line4.setColor(Color.argb((int) levelOfAlpha4, 135, 206, 250)); 
     canvas.drawCircle(1300, 0, 225, line4); 

     if(levelOfAlpha4==0) 
     { 
      levelOfAlpha4=255; 
     } 
     else 
     { 
      levelOfAlpha4-=3.4; 
      if(line5luncher!=20){ 
       line5luncher++; 
      } 
     } 
    } 

    if(line5luncher==20) 
    { 
     //this same as for first line 
     line5.setColor(Color.argb((int) levelOfAlpha5, 135, 206, 250)); 
     canvas.drawCircle(1300, 0, 250, line5); 

     if(levelOfAlpha5==0) 
     { 
      levelOfAlpha5=255; 
     } 
     else 
     { 
      levelOfAlpha5-=3.4;    
     } 
    } 
} 

을 준비하고 화면에 어떻게 보이는지

import android.annotation.SuppressLint; 
import android.graphics.Canvas; 
import android.view.SurfaceHolder; 

public class CanvasThreadForCanvas extends Thread { 
    private SurfaceHolder mySurfaceHolder; 
    private PanelForCanvas myPanel; 
    public static boolean runIt = false; 

    public CanvasThreadForCanvas(SurfaceHolder surfaceHolder, 
      PanelForCanvas panel) 
    { 
     mySurfaceHolder = surfaceHolder; 
     myPanel = panel; 

    } 
    public void setRunning(boolean run) 
    { 
     runIt= run; 
    } 

    @SuppressLint("WrongCall") 
    @Override 
    public void run() { 
     Canvas c; 
     while(runIt) 
     { 
      try { 

       // how fast will be invoked on draw method 
       Thread.sleep(10, 0); 
      } catch (InterruptedException e) { 
       // TODO Auto-generated catch block 
       e.printStackTrace(); 
      } 
      c = null; 
      try 
      { 

       synchronized(mySurfaceHolder) 
       { 

        c = mySurfaceHolder.lockCanvas(null); 
        myPanel.onDraw(c); 
       } 
      }finally 
      { 
       if(c!= null) 
       { 
        mySurfaceHolder.unlockCanvasAndPost(c); 
       } 
      } 
     } 
     super.run(); 
    } 



} 

및 방법에 관한 것이다. enter image description here 너무 아름다워요.
어떻게 이런 점들의 효과를 얻을 수 있습니까?

반복적으로 움직이는 동그라미 모양의 원을 얻는 더 쉬운 방법을 알고 있다면 감사 할 것입니다.

+0

이봐, 내가 도움이 필요해. 나는 정확한 코드를 제공 할 수있는 이런 애니메이션을 보여주고 싶다. 그럴 수 있다면 그것은 나를 위해 매우 도움이 될 것입니다 –

+0

내 애니메이션은 훌륭해 보이지 않지만 나에게 메일을주고 나는 코드를 보낼 것이다. – MyWay

+0

감사합니다. 나는 적어도 아이디어를 얻을거야 [email protected] –

답변

1

linePaint.setPathEffect(new DashPathEffect(new float[] {3,6}, 0)); 어떨까요?

+0

그래, 그게 많이 작동하는거야 – MyWay

+0

좋다! 당신은 그 대답을 받아 들일 수 있습니다;) – Zoubiock

+0

그런데, 그리기 메소드에서 Paint 객체를 생성하지 마십시오. 그것을 전역 변수로 만들고 재사용하면 더 빠를 것입니다. – Zoubiock

관련 문제