(초보자를 위한 iOS 응용 개발) UIImage 애니메이션 회전 이야기

하고 싶은 일:
・ 앞문장http://qiita.com/CST_negi/items/7e75a4402f7ba9998270에서 이미 온도를 얻었기 때문에 계기와 바늘로 표시하고 싶습니다.
・나는 애니메이션이 있는 방식으로 그것을 그리고 싶다.
저희가 Hack App을 하나 만들어서 드디어 감시가의 부분을 완성했습니다!!
그림 여기 있습니다.

아랫부분만(실제 동작이 더 매끄럽게)

기능으로
· 웹 카메라에서 나온 영상을 볼 수 있다
시간을 알다
실온을 알다
이런 상황입니다.다른 라벨에 에어컨을 틀거나 천장 불을 켜는 걸 봤어요.아직 그 부분은 이루어지지 않았지만 기대가 큽니다.
그럼 본론으로 들어가겠습니다.
그 전에 주의점이 하나 있어요.

이 계량기 부분은 스스로 만들었지만 바늘 부분에 조금만 공을 들여'원점을 바늘의 원형 부분에 놓듯이 밑에 공백을 두는 방법'을 만들었다.
왜 그랬을까? 이렇게 되면 그림의 적환 부분을 중심으로 회전하기 때문에 예상되는 동작이 된다.
예를 들어, 원점을 빨간색 바늘 이미지의 중심(가운데)으로 설정하고 회전할 때
• 모방 변환을 통해 축이 위로 이동하여 적원형 부분에 위치하게 한다
회전
• 원형을 유지하면 위로 이동하므로 모방 변환을 통해 아래로 이동하여 위치를 수정합니다
반드시 이렇게 해야 한다.
이걸 할 수 있었으면 좋겠는데 도저히 할 수가 없어서 그림에 공을 들였다.
만약 이런 방법이 있다면 평론에서 저에게 알려주세요.
(추서:
http://stackoverflow.com/questions/8275882/one-step-affine-transform-for-rotation-around-a-point
그렇게 지도 모른다, 아마, 아마...
애니메이션으로 회전하는 방법은 두 가지가 있다.
① transform = CGAf fineTransform MakeRotation(angleRad)을 애니메이션 처리에 사용
② CABasicAnimation(keyPath: "transform.rotation.z") 사용
이어서 각각 해설하다.
① transform = CGAf fineTransform MakeRotation(angleRad)을 애니메이션 처리에 사용
예를 들어 이렇게 사용한다.let angleRad:CGFloat = CGFloat((30 * M_PI) / 180.0)
self.ClockHandImage.transform = CGAffineTransformMakeRotation(angleRad)
이것은 호도 각도를 생성한 후 이를 모의 변환된 회전 함수 매개 변수에 넣는 방법이다.그림 회전에 관해서는 이것만 회전하면 됩니다.
(참조: https://sites.google.com/a/gclue.jp/swift-docs/ni-yinki100-ios/uikit/uiimageno-hua-xiangno-hui-zhuan-kuo-suo-fan-zhuan）
이 모방 변환 방법으로 애니메이션을 하는 것도 그리 힘들지 않다.
ViewController.swift

func updateTempratureMeterValue(temperature : Double){
        var angle = -45 + 3 * temperature
        //-75 ~ 75の150度
        let angleRad:CGFloat = CGFloat((angle *  M_PI) / 180.0)

        UIView.animateWithDuration(1.0,
            // 遅延時間.
            delay: 0.0,
            // バネの弾性力. 小さいほど弾性力は大きくなる.
            usingSpringWithDamping: 0.5,
            // 初速度.
            initialSpringVelocity: 1,
            // 一定の速度.
            options: UIViewAnimationOptions.CurveLinear,
            animations: { () -> Void in
                // 回転用のアフィン行列を生成.
                self.ClockHandImage.transform = CGAffineTransformMakeRotation(angleRad)
            },
            completion: { (Bool) -> Void in
        })
    }

이렇게 UIView애니메이트 위드레이션 처리에 말려들게 해주세요.
(참조: https://sites.google.com/a/gclue.jp/swift-docs/ni-yinki100-ios/uikit/animeshonwoendoresu-zai-shengsuru
이 처리가 어떻게 진행되었는지 말씀드릴게요.
・1초 후 애니메이션 처리 완료
· 지연 시간 없음(호출 처리부터 애니메이션 시작까지의 시간)(0)
・0.5개의 탄력력 있는 동작을 한다
• 첫 속도 1
일정한 속도로
• Clock HandImage(UIImage)를 지정된 각도로 회전
그렇습니다.
② CABasicAnimation(keyPath: "transform.rotation.z") 사용
다음은 CABasicAnimation입니다.
https://ja.wikipedia.org/wiki/Core_Animation에서 보듯이 CA는 CoreAnimation의 약칭이다.Mac OS X를 구성하는 중간부품의 일종으로, 사용자 인터페이스 표시용 애니메이션 처리를 지원한다고 한다.
이 keyppath가 징징거려도 잘 안 나오는 게 놀라워요.
・transform.translation이면 이동.
・transform.하면, 만약, 만약...
・transform.scale로 배율 조정
표시하는 것 같습니다.
(참조: https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreAnimation_guide/Key-ValueCodingExtensions/Key-ValueCodingExtensions.html#//apple_ref/doc/uid/TP40004514-CH12-SW8
이번엔 트랜스포머야.rotation을 사용합니다.
z축은 화면에 비해 수직인 축을 나타내기 때문에 이 축을 사용하는 회전 방법으로 위에서 회전하는 팽이의 느낌과 같다고 생각하면 된다.
ViewController.swift

    func rotateGear(key : String){

        let anim = CABasicAnimation(keyPath: "transform.rotation.z")
        anim.fromValue = 0
        anim.toValue = 1 * M_PI
        anim.duration = 2.0
        anim.repeatCount = HUGE
        GearImage1.layer.addAnimation(anim, forKey: key)
        GearImage3.layer.addAnimation(anim, forKey: key)

        let animInv = CABasicAnimation(keyPath: "transform.rotation.z")
        animInv.fromValue = 0
        animInv.toValue = -1 * M_PI
        animInv.duration = 2.0
        animInv.repeatCount = HUGE

        GearImage2.layer.addAnimation(animInv, forKey: key+"Inv")
    }

이 코드를 기초로 해설을 진행하다.(GearImage는 첫 번째 모니터의 캡처에서 말한 중간 기어로 이 처리를 통해 영원히 회전한다.)
먼저let anim = CABasicAnimation(keyPath: "transform.rotation.z")를 참고하십시오.
다음anim.fromValue = 0
anim.toValue = 1 * M_PI"0에서 π까지의 회전 각도 사용"을 지정합니다.
그리고 나서anim.duration = 2.0애니메이션 실행 2초를 지정합니다.
또 왔다anim.repeatCount = HUGE를 참고하십시오.
※ HUGE로 지정하면 무한 반복됩니다.
최후GearImage1.layer.addAnimation(anim, forKey: key)그림에 애니메이션을 추가했습니다.
(forKey: 매개 변수에 관해서는 CAAnimation이 끝날 때 애니메이션을 구별하여 추가 처리하는 것이 필요하다. 그런 일을 하려면 이름을 잘 붙이는 것이 좋다)
(참조: http://captainshadow.hatenablog.com/entry/20110222/1298352073
그게 다야.만약 무슨 지적이 있으면 평론란에 가세요.