Android Shutter Animation

1. Requirements

카메라 셔터 느낌이 나는 애니메이션

2. Research

1) Path Effect

Dash느낌과 곡선의 느낌을 표현하려면 DashPathEffect와 ConerPathEffect를 조합한 ComposePathEffect를 생성해서  android.graphics.PathEffect를 Paint에 set하면 된다. 

예제

@Override
protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   float radius = 50.0f;
   CornerPathEffect cornerPathEffect = new CornerPathEffect(radius);

   float[] intervals = new float[]{80.0f, 30.0f}; // 첫번째 인자는 Dash의 길이, 두번째 인자는 Dash의 간격
   float phase = 0; // 화면에서 첫번째 Dash가 얼만큼 잘려서 그려져도 되는지 시작값  
   DashPathEffect dashPathEffect = new DashPathEffect(intervals, phase);

   ComposePathEffect composePathEffect = new ComposePathEffect(cornerPathEffect, dashPathEffect);
   mPaint.setPathEffect(composePathEffect);

   canvas.drawPath(mPath, mPaint);
}

이미지 출처 - https://medium.com/marojuns-android/path-tracing-c316e496aa2f

예제 - http://learing-android.blogspot.kr/2014/05/composepatheffect-vs-sumpatheffect.html

2) Round 느낌의 선

PathDashPathEffect을 이용하면 아래와 같이 선에 원이나 다른 모양으로 된 stamp를 추가할 수가 있다.

이미지 출처 - https://www.cnblogs.com/tianzhijiexian/p/4297783.html

PathDashPathEffect.Style를 이용하면 stamp의 방향을 결정할 수 있다.

이미지 출처 - http://hencoder.com/ui-1-2/

예제

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

        Path path = new Path();  
        path.addCircle(0, 0, 3, Direction.CCW);  
        PathEffect pathEffect = 
new PathDashPathEffect(path, // stamp 모양, 별모양도 추가가능 
                                12, // stamp 사이 간격                                 
                                phase, // 화면에서 첫번째 stamp의 시작값
                                PathDashPathEffect.Style.ROTATE);  // 각 stamp의 transform 방법        
        mPaint.setPathEffect(pathEffect);
        canvas.drawPath(mPath, mPaint);
 }

예제 - http://Effect of advance, phase, style in PathDashPathEffect

3. Result

결국 원의 호를 시작 angle값을 다르게 주어 그리는 것으로 해결하였다. 

직선의 Round 느낌은 아래 Paint 설정으로 가능하다. 

코드

float shutterArcPaddingRight = 20f;
float shutterArcWidth = 10f;
int arcCount = Math.round((360 / (shutterArcWidth + shutterArcPaddingRight)));
while (x <= arcCount) {
    canvas.drawArc(baseArcRectF, startAngle, sweepAngleOffset, false, baseArcPaint);
    startAngle += shutterArcWidth + shutterArcPaddingRight;
    x++;
}

동영상