iPad 용 twitter에서 종이 접이식/펼치기 효과

iPad 용 Twitter는 멋진 "종이 접기를 펼치기"효과를 구현합니다. 여기 짧은 비디오 클립. http://www.youtube.com/watch?v=B0TuPsNJ-XY iPad 용 twitter에서 종이 접이식/펼치기 효과

OpenGL을 사용하지 않고 CATransform3D으로 수행 할 수 있습니까? 실제 사례가 감사 할 것입니다.

업데이트 :이 애니메이션 효과에 대한 접근이나 구현에 관심이있었습니다. 이것이 내가이 질문에 현상금을 제공 한 이유입니다. -srikar

출처

2011-03-22 Tim Wu

멋진 동영상을 게시 해 주셔서 감사합니다. 트위터에서 그런 생각을하지 못했습니다. :) –

와우, 현상금 작품! 현상금 인 @Srikar를 제공해 주셔서 감사합니다. –

yupp bounty works :) 멋진 커뮤니티 덕분에 ... –

여기에 제스처 인식기를 사용하고 시작하려면 CATransform3D을 사용하는 간단한 예가 있습니다. 손가락을 모으기 만하면 회색보기가 회전합니다.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
    // ... 

    CGRect rect = self.window.bounds; 
    view = [[UIView alloc] initWithFrame:CGRectMake(rect.size.width/4, rect.size.height/4, 
                 rect.size.width/2, rect.size.height/2)]; 
    view.backgroundColor = [UIColor lightGrayColor]; 
    [self.window addSubview:view]; 

    CATransform3D transform = CATransform3DIdentity; 
    transform.m34 = -1/500.0; // this allows perspective 
    self.window.layer.sublayerTransform = transform; 

    UIPinchGestureRecognizer *rec = [[UIPinchGestureRecognizer alloc] initWithTarget:self 
                       action:@selector(pinch:)]; 
    [self.window addGestureRecognizer:rec]; 
    [rec release]; 

    return YES; 
} 

- (void)pinch:(UIPinchGestureRecognizer *)rec 
{ 
    CATransform3D t = CATransform3DIdentity; 
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0); 
    t = CATransform3DRotate(t, rec.scale * M_PI, 1, 0, 0); 
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0); 
    self.view.layer.transform = t; 
}

출처

2011-06-28 06:17:49 jtbandes

두 개의 CATransform3DTranslate 메서드 호출의 목적을 이해하지 못합니다. – haroldcampbell

@haroldcampbell 이들의 목표는 중심이 아닌 레이어의 가장자리를 중심으로 회전하는 것입니다. – jtbandes

그래야 레이어의 anchorPoint 속성을 설정해야합니다. – neilkimmett

효과는 기본적으로 X 축을 중심으로 회전하는 뷰입니다. 목록에서 트윗을 드래그하면 X-Z 평면에 평행하게 시작하는 뷰가 있습니다. 사용자가 집을 풀 때 뷰는 X-Y 평면에 완전히 들어올 때까지 X 축을 중심으로 회전합니다. documentation 말한다 :

가

CATransform3D 데이터 구조 가 균일 입체 를 회전하는데 사용된다 (CGFloat 값의 4 × 4 행렬), 오프셋 스케일 변환 스큐 관점 적용 규정 레이어로 변환합니다.

또한 우리는 CALayer의 transform 속성이 CATransform3D 구조이며 애니메이션도 가능하다는 것을 알고 있습니다. Ergo, 나는 Core Animation에서 폴딩 효과가 가능하다고 말하는 것이 안전하다고 생각합니다.

출처

2011-06-28 05:51:31 Caleb

본질적으로이 효과는 여러 단계로 구성된다 : 핀치 아웃이 발생하는 경우

제스처 인식기 검출.
제스처가 시작되면 트위터가 상단 및 하단 부분에 대해 graphics context을 생성하여 본질적으로 레이어에서 이미지를 만듭니다. *
이미지를 상단 및 하단의 하위보기로 첨부하십시오.
손가락이 구부러 지거나 튀어 나와서 이미지에 CATransform3D ~ add perspective을 사용하십시오.
보기가 '완전히 펼쳐져'나오면 실제 하위보기를 표시하고 그래픽 컨텍스트로 만든 이미지를 제거하십시오.

보기를 축소하려면 위의 역순으로 수행하십시오.

* 이러한보기는 비교적 간단하기 때문에 그래픽 컨텍스트로 렌더링 할 필요가 없습니다.

출처

2011-06-28 05:53:09

iPad 용 twitter에서 종이 접이식/펼치기 효과

답변

관련 문제