KR102139439B1 - 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법 및 장치 - Google Patents

모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법 및 장치 Download PDF

Info

Publication number
KR102139439B1
KR102139439B1 KR1020197014230A KR20197014230A KR102139439B1 KR 102139439 B1 KR102139439 B1 KR 102139439B1 KR 1020197014230 A KR1020197014230 A KR 1020197014230A KR 20197014230 A KR20197014230 A KR 20197014230A KR 102139439 B1 KR102139439 B1 KR 102139439B1
Authority
KR
South Korea
Prior art keywords
image
frame
parameter
display
endpoint
Prior art date
Application number
KR1020197014230A
Other languages
English (en)
Other versions
KR20190071764A (ko
Inventor
시아오칭 동
Original Assignee
알리바바 그룹 홀딩 리미티드
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 알리바바 그룹 홀딩 리미티드 filed Critical 알리바바 그룹 홀딩 리미티드
Publication of KR20190071764A publication Critical patent/KR20190071764A/ko
Application granted granted Critical
Publication of KR102139439B1 publication Critical patent/KR102139439B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G06T11/206—Drawing of charts or graphs

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • General Engineering & Computer Science (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)
  • Digital Computer Display Output (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

본원은 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법을 제공하며, 이 방법은 숨겨진 캔버스 상에 디스플레이될 최종 이미지를 드로잉하고, 드로잉된 이미지를 엔드포인트 이미지로서 저장하는 단계와, 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 가변 디스플레이 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 엔드포인트 이미지의 적어도 일부를 프레임 단위로 디스플레이하는 단계를 포함하고, 가변 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된다. 본원의 기술적 솔루션을 이용함으로써, 애니메이션 프로세스에서 각 프레임의 이미지를 프레임 단위로 계산하고, 버퍼링하며, 드로잉할 필요가 없기 때문에, 애니메이션에 필요한 코드 양을 줄이고, 메모리 점유율을 낮추며, 애니메이션 실행 효율을 높일 수 있다.

Description

모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법 및 장치
본원은 네트워크 통신 기술 분야에 관한 것이며, 구체적으로는 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법 및 장치에 관한 것이다.
모바일 디바이스의 성능 발전으로, 모바일 디바이스 상에서 실행되는 사용자 인터페이스의 복잡성과 친숙성이 각각 감소하고 향상되고 있다. 더 나은 사용자 경험을 구현하기 위해, 점점 더 많은 네트워크 서비스 공급자가 애니메이션 방법을 사용하여 브라우저 페이지 또는 클라이언트 인터페이스에 다양한 자료를 디스플레이하고 있다.
기존 기술에서는 모바일 디바이스 상의 애니메이션 구현이 대개 퍼스널 컴퓨터(PC) 상의 솔루션을 사용한다. 구체적으로, 각 프레임의 이미지의 크기 및 위치와 같은 디스플레이에 사용되는 데이터가 계산되고, 디스플레이에 사용되는 데이터와 이미지의 데이터 모두가 메모리에 버퍼링된다. 애니메이션 실행 프로세스에 있어서, 캔버스 상의 현재 컨텐츠는 일정 간격으로 삭제되고, 버퍼링되어 있는 다음 프레임의 데이터를 사용하여 다음 프레임의 디스플레이 컨텐츠가 캔버스 상에 다시 드로잉된다.
이와 같은 솔루션에서는, 각 프레임의 이미지의 계층(hierarchy) 및 속성에 대한 정보가 기록되어야 한다. 그 결과, 프로그래밍 코드 양이 매우 커서, 각 프레임의 이미지의 데이터를 버퍼링하기 위해 많은 메모리가 사용되며, 각 프레임의 이미지를 다시 드로잉하기 위해 더 많은 프로세싱 능력이 소비된다. 모바일 디바이스의 하드웨어 리소스 및 동작 속도는 여전히 PC의 하드웨어 리소스 및 동작 속도보다 훨씬 낮기 때문에, 이러한 솔루션은 코드 양이 지나치게 크고, 메모리의 오버헤드가 높으며, 실행 효율이 낮다는 문제가 있다.
이상의 과제를 감안하여, 본원은 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법을 제공하며, 이 방법은 숨겨진 캔버스 상에 디스플레이될 최종 이미지를 드로잉하고, 드로잉된 이미지를 엔드포인트 이미지로서 저장하는 단계와, 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 가변 디스플레이 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 엔드포인트 이미지의 적어도 일부를 프레임 단위로 디스플레이하는 단계를 포함하고, 가변 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된다.
본원은 또한 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 장치를 제공하며, 이 장치는 숨겨진 캔버스 상에 디스플레이될 최종 이미지를 드로잉하고, 드로잉된 이미지를 엔드포인트 이미지로서 저장하도록 구성되는 엔드포인트 이미지 생성 유닛과, 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 가변 디스플레이 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 엔드포인트 이미지의 적어도 일부를 프레임 단위로 디스플레이하도록 구성되는 애니메이션 디스플레이 유닛을 포함하고, 가변 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된다.
전술한 기술적 솔루션으로부터, 본원의 구현예에서, 디스플레이될 최종 이미지가 숨겨진 캔버스 상에 드로잉되고 엔드포인트 이미지로서 저장되며, 엔드포인트 이미지는 애니메이션 실행 프로세스에서 가변 디스플레이 파라미터를 이용하여 디스플레이되는 것을 알 수 있다. 이에, 애니메이션 프로세스에서 각 프레임의 이미지를 프레임 단위로 계산하고, 버퍼링하며, 드로잉할 필요가 없기 때문에, 애니메이션에 필요한 코드 양을 줄이고, 메모리 점유율을 낮추며, 애니메이션 실행 효율을 높일 수 있다.
도 1은 본원의 구현예에 따른, 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법을 예시하는 흐름도이다.
도 2는 본원의 적용예에 따른 동향 그래프의 엔드포인트 이미지의 예시 도면이다.
도 3은 본원의 적용예에 따른 동향 그래프의 애니메이션의 각 프레임의 이미지 시퀀스를 디스플레이하는 개략도이다.
도 4는 본원의 적용예에 따른 막대 그래프의 엔드포인트 이미지의 예시 도면이다.
도 5는 본원의 적용예에 따른 막대 그래프의 애니메이션의 각 프레임의 이미지 시퀀스를 디스플레이하는 개략도이다.
도 6은 모바일 디바이스의 하드웨어 구조도이다.
도 7은 본원의 구현예에 따른, 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 장치의 논리 구조도이다.
본원의 구현예는 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 새로운 방법을 제공한다. 애니메이션 엔드포인트로서 디스플레이될 이미지가 숨겨진 캔버스 상에 드로잉되고 엔드포인트 이미지로서 저장된다. 애니메이션 실행 프로세스에 있어서, 디스플레이될 애니메이션 효과에 기초하여 각 프레임의 디스플레이 파라미터가 결정되고, 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 각 프레임의 디스플레이 파라미터를 이용하여 엔드포인트 이미지의 일부 또는 전부가 디스플레이된다. 본원의 구현예에서는, 애니메이션 프로세스에서의 각 프레임의 이미지의 계층 및 속성에 관한 정보의 산출 및 기록을 피하기 위해, 가변 디스플레이를 통해 엔드포인트 이미지의 일부 또는 전부를 디스플레이함으로써 애니메이션 효과가 달성된다. 애니메이션 프로세스에서는, 드로잉된 이미지가 사용되고, 그에 따라, 각 프레임의 이미지를 드로잉하거나 각 프레임의 이미지의 데이터를 버퍼링할 필요가 없기 때문에, 메모리 점유율 및 프로세싱 능력 소비를 줄일 수 있고, 기존의 기술에 있어서의 문제를 완화할 수 있다.
본원의 구현예는 예컨대 모바일 폰, 태블릿 컴퓨터, 및 노트북과 같은, 연산, 저장 및 디스플레이 기능을 가진 임의의 모바일 디바이스에 적용될 수 있다. 소프트웨어 관점에서, 본원의 구현예는 클라이언트/서버(C/S) 구조의 클라이언트에 적용될 수도 있고, 브라우저/서버(B/S) 구조의 브라우저 페이지에 적용될 수도 있으며, 또는 모바일 디바이스 상에서 실행되는 다른 소프트웨어에도 적용될 수 있다.
본원의 구현예에서, 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법의 절차가 도 1에 도시된다.
단계 110: 숨겨진 캔버스 상에 디스플레이될 최종 이미지를 드로잉하고 드로잉된 이미지를 엔드포인트 이미지로서 저장한다.
모바일 디바이스가 숨겨진 캔버스를 생성하고, 디스플레이될 최종 이미지, 즉 숨겨진 캔버스 상에서 애니메이션의 종료 시에 사용자에게 디스플레이될 이미지를 드로잉하며, 숨겨진 캔버스 상에 드로잉된 이미지를 엔드포인트 이미지로서 저장한다.
모바일 디바이스가 디스플레이될 최종 이미지를 드로잉하는데 필요한 데이터는 실제 애플리케이션 시나리오에서 이미지 상에 디스플레이될 컨텐츠에 기초하여 결정될 수있다. 이미지 드로잉에 필요한 데이터는 모바일 디바이스에 의해 로컬로 판독되거나 산출될 수도 있고, 서버로부터 취득될 수도 있으며, 또는 서버로부터 획득된 다른 데이터에 기초하여 산출될 수도 있다. 이미지가 드로잉될 때에 사용되는 특정 드로잉 방법에 대해서는, 기존의 기술을 참조할 수 있다. 본원의 이 구현예에서는 이미지를 드로잉하기 위한 데이터 소스, 이미지의 디스플레이 컨텐츠, 및 이미지 드로잉 방법이 한정되지 않는다.
모바일 디바이스는 애니메이션 영역에 기초하여 숨겨진 캔버스를 생성할 수 있다. 예를 들어, 마지막으로 디스플레이되는 이미지의 피크 데이터를 참조하여, 애니메이션 영역의 형상에 따라 동일한 비율로 스케일업 또는 스케일다운되는 숨겨진 캔버스가 생성될 수 있다. 다른 예에서는, 애니메이션 영역과 동일한 형상 및 크기를 가진 숨겨진 캔버스가 생성될 수 있다. 이와 같이, 엔드포인트 이미지는 스케일업 또는 스케일다운의 필요성 없이도 애니메이션 종료 시에 애니메이션 영역 내에 바로 디스플레이될 수 있기 때문에 계산이 간략화된다. 사실상, 모바일 디바이스는 숨겨진 캔버스를 랜덤으로 생성할 수 있고, 후속 애니메이션 프로세스에서는, 디스플레이 파라미터를 설정함으로써 엔드포인트 이미지의 일부 또는 전부가 애니메이션 영역 내에 디스플레이된다.
숨겨진 캔버스 상에 드로잉된 엔드포인트 이미지는 모바일 디바이스 내에 파일 형태로 로컬로 저장될 수도 있고, 버퍼 내에 이미지 데이터 형태로 저장될 수도 있다. 숨겨진 캔버스는 엔드포인트 이미지가 저장된 후에 삭제될 수 있다.
단계 120: 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 가변 디스플레이 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 엔드포인트 이미지의 적어도 일부를 프레임 단위로 디스플레이한다.
엔드포인트 이미지가 생성된 후에, 디스플레이될 애니메니션 효과에 기초하여, 애니메이션 실행 프로세스에서의 다양한 프레임의 디스플레이 파라미터를 결정하고, 애니메이션의 종료 시에 엔드포인트 이미지가 디스프레이될 때까지, 다양한 프레임의 디스플레이 파라미터를 일정한 간격으로 연속으로 사용하여 애니메이션 영역 내에 엔드포인트 이미지의 일부 또는 전부를 디스플레이한다. 인접한 프레임들의 디스플레이 파라미터들은 상이하고, 가변 모드는 디스플레이될 애니메이션 효과에 관련된다.
디스플레이 파라미터는, 엔드포인트 이미지를 프로세싱하여 각 프레임의 이미지를 취득하는데 사용되는 엔드포인트 이미지 프로세싱 파라미터와, 프로세싱된 엔드포인트 이미지가 디스플레이되는 애니메이션 영역 내의 위치를 결정하는데 사용되는 디스플레이 위치 파라미터를 포함할 수 있다. 인접한 프레임들은 엔드포인트 이미지 프로세싱 파라미터 또는 디스플레이 위치 파라미터 중 적어도 하나가 상이하다. 애니메이션 실행 프로세스에서, 모바일 디바이스는 각 프레임의 엔드포인트 이미지 프로세싱 파라미터에 기초하여 엔드포인트 이미지를 프로세싱하여 프레임의 이미지를 취득하고, 프레임의 디스플레이 위치 파라미터를 이용하여, 각 프레임의 이미지에 대응하는 시점(time point)에서 애니메이션 영역 내에 프레임의 이미지를 디스플레이한다(2개의 인접한 프레임들의 이미지들은 전술한 간격만큼 이격되어 있다). 인접한 프레임들의 이미지 프로세싱 파라미터가 변하거나, 디스플레이 위치 파라미터가 변하거나, 엔드포인트 이미지 프로세싱 파라미터와 디스플레이 위치 파라미터 둘 다가 변할 때에, 상이한 애니메이션 효과가 달성될 수 있다. 이하, 예를 들어 설명한다.
제1 예에 있어서, 애니메이션 효과에 기초하여 결정된 각 프레임의 스크린샷 파라미터 및 고정 디스플레이 위치 파라미터가 가변 디스플레이 파라미터로서 사용되어, 애니메이션 영역 내에 엔드포인트 이미지를 점차적으로 디스플레이하는 효과를 달성한다. 전체 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 각 프레임의 스크린샷 파라미터에 기초하여 캡처된 엔드포인트 이미지의 일부가, 고정 디스플레이 위치 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이된다. 구체적으로, 각 프레임에 대응하는 시점에서, 모바일 디바이스는 프레임의 스크린샷 파라미터에 기초해서 엔드포인트 이미지의 일부를 캡처하여, 프레임의 이미지를 취득하고, 고정 디스플레이 위치 파라미터에 기초하여 애니메이션 영역 내에 프레임의 이미지를 디스플레이한다. 스크린샷 파라미터에 기초하여 캡처된 이미지는 완전한 엔드포인트 이미지가 형성될 때까지, 점차 확대된다.
제1 예의 응용에 있어서, 각 프레임의 이미지의 상단 좌측 코너부의 디스플레이 위치 파라미터는 애니메이션 영역의 상단 좌측 코너부로서 고정될 수 있고, 좌측에 있는 엔드포인트 이미지의 일부는 각 프레임의 이미지로서 캡처되며, 캡처된 영역은 점차 확대되어, 좌측에서 우측으로 엔드포인트 이미지를 점차적으로 디스플레이하는 애니메이션 효과를 달성한다. 제1 예의 다른 응용에 있어서, 각 프레임의 이미지의 중심점의 디스플레이 위치 파라미터는 애니메이션 영역의 중심점으로서 고정될 수 있고, 엔드포인트 이미지의 중심점은 캡처되는 각 프레임의 이미지의 중심점으로서 사용되며, 캡처된 영역은 점차 확대되어, 중심에서 가장자리로 엔드포인트 이미지를 점차적으로 디스플레이하는 애니메이션 효과를 달성한다. 다른 애플리케이션 시나리오들은 간략함을 위해 여기에서 생략된다.
제2 예에 있어서, 애니메이션 효과에 기초하여 결정된 각 프레임의 디스플레이 파라미터와, 각 프레임의 스크린샷 파라미터가 가변 디스플레이 파라미터로서 사용되어, 디스플레이를 위해 애니메이션 영역의 외부로부터 애니메이션 영역으로 엔드포인트 이미지를 점차적으로 이동시키는 효과를 달성한다. 전체 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 스크린샷 파라미터에 기초해 캡처된 엔드포인트 이미지의 일부가, 프레임의 디스플레이 위치 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이된다. 구체적으로, 각 프레임에 대응하는 시점에서, 모바일 디바이스는 프레임의 스크린샷 파라미터에 기초해서 엔드포인트 이미지의 일부를 캡처하여, 프레임의 이미지를 취득하고, 프레임의 디스플레이 위치 파라미터에 기초하여 애니메이션 영역 내에 프레임의 이미지를 디스플레이한다. 스크린샷 파라미터에 기초하여 캡처된 이미지가 점차 확대되고, 대응하여 이미지의 디스플레이 위치도 이동하여, 프레임의 이미지는, 마지막 프레임의 이미지가 완전한 엔드포인트 이미지가 되고 전체 애니메이션 영역을 차지할 때까지, 애니메이션 영역 내에 완전히 디스플레이될 수 있다.
제2 예의 응용에 있어서, 각 프레임의 이미지의 상단 우측 코너부의 디스플레이 위치 파라미터가 애니메이션 영역의 상단 모서리를 따라 우측으로 점차 시프트될 수 있고, 좌측에 있는 엔드포인트 이미지의 일부는 각 프레임의 이미지로서 캡처되며(이미지의 크기는 디스플레이 위치 파라미터에 대응함), 캡처된 영역은 점차 확대되어, 좌측에서 우측으로 엔드포인트 이미지를 애니메이션 영역으로 이동시키는 애니메이션 효과를 달성한다. 다른 애플리케이션 시나리오들은 간략함을 위해 여기에서 생략된다.
제3 예에 있어서, 애니메이션 효과에 기초하여 결정된 각 프레임의 압축 파라미터 및 고정 디스플레이 위치 파라미터가 가변 디스플레이 파라미터로서 사용되어, 엔드포인트 이미지가 애니메이션 영역을 점차적으로 차지하는 효과를 달성한다. 애니메이션 영역에 매칭되는 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 압축 파라미터에 기초하여 압축을 수행함으로써 취득된 엔드포인트 이미지가, 디스플레이 위치 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이된다. 구체적으로, 각 프레임에 대응하는 시점에서, 모바일 디바이스는 프레임의 압축 파라미터에 기초해 엔드포인트 이미지를 압축한 후에 프레임의 이미지를 취득하고, 고정 디스플레이 위치 파라미터에 기초하여 애니메이션 영역 내에 프레임의 이미지를 디스플레이한다. 압축 파라미터에 기초해 압축을 수행함으로써 취득된 각 프레임의 이미지는 전체 이미지 영역이 차지할 때까지 점차 확대된다.
제3 예의 응용에 있어서, 각 프레임의 이미지의 상단 좌측 코너부의 디스플레이 위치 파라미터가 애니메이션 영역의 상단 좌측 코너부로서 고정될 수 있고, 엔드포인트 이미지의 길이-폭 비에 기초하여 각 프레임에서 비례 압축이 수행되며, 압축률이 점차적으로 감소하여, 애니메이션 영역의 상단 좌측 코너부로부터 엔드포인트 이미지를 먼 거리에서 가깝게 점차적으로 디스플레이하는 애니메이션 효과를 달성한다. 제3 예의 다른 응용에 있어서, 각 프레임의 이미지의 하단 모서리의 디스플레이 파라미터가 애니메이션 영역의 하단 모서리로서 고정될 수 있고, 각 프레임에서 엔드포인트 이미지의 폭이 압축되며, 압축률이 점차적으로 감소하여, 엔드포인트 이미지가 밑에서부터 시작하여 전체 애니메이션 영역을 점차적으로 차지하는 효과를 달성한다. 다른 애플리케이션 시나리오들은 간략함을 위해 여기에서 생략된다.
달성될 애니메이션 효과들이 상이할 경우, 스크린샷 파라미터 및 압축 파라미터와는 상이한, 예컨대 엔드포인트 이미지를 회전시키는 회전 파라미터 및 엔드포인트 이미지에 대해 컬러 프로세싱을 수행하는 필터 파라미터 등의 다른 엔드포인트 이미지 프로세싱 파라미터를 사용할 수 있다. 또한, 다양한 엔드포인트 이미지 프로세싱 파라미터를 참조하여 엔드포인트 이미지에 멀티프로세싱이 수행될 수 있다. 예를 들어, 압축 파라미터를 회전 파라미터와 조합함으로써, 특정 점을 중심점으로서 사용하여 전체 엔드포인트 이미지를 점차적으로 회전시키는 애니메이션 효과를 달성할 수 있다. 본원의 이 구현예에서는, 사용될 엔드포인트 이미지 프로세싱 파라미터의 유형 및 수치(quantity), 그리고 고정 또는 가변 디스플레이 위치 파라미터의 조합 사용이 제한되지 않는다.
본원의 이 구현예에서는, 디스플레이될 최종 이미지가 숨겨진 캔버스 상에 드로잉되고 엔드포인트로서 저장될 수 있음을 알 수 있다. 애니메이션 실행 프로세스에 있어서, 디스플레이될 애니메이션 효과에 기초하여 각 프레임의 디스플레이 파라미터가 결정되고, 각 프레임의 디스플레이 파라미터에 기초하여 엔드포인트의 일부 또는 전부가 디스플레이되며, 가변 디스플레이 파라미터에 기초하여 애니메이션 효과가 달성되어, 애니메이션 프로세스에서 각 프레임의 이미지의 계층 및 속성에 관한 계산 및 기록을 피할 수 있고, 프로그래밍 코드 양을 줄일 수 있다. 애니메이션 프로세스에 있어서, 엔드포인트 이미지가 사용되기 때문에, 각 프레임의 이미지를 드로잉하고 각 프레임의 이미지의 데이터를 버퍼링할 필요가 없기에, 메모리 점유율 및 프로세싱 능력 소비를 줄여서, 애니메이션 실행 효율을 높일 수 있다.
본원의 적용예로, 스마트폰의 브라우저 환경에서, 그래프(동향 그래프 및 막대 그래프를 포함함)가 사용자에게 디스플레이될 때, 애니메이션 효과가 사용된다.
브라우저 페이지 상에 동향 그래프가 디스플레이되어야 할 경우, 동향 그래프의 디스플레이 영역과 동일한 크기의 숨겨진 캔버스가 생성되고, 서버로부터 수신된 동향 그래프의 그래픽 데이터에 기초하여, 도 2에 도시하는 바와 같이, 사용자에게 디스플레이될 최종 동향 그래프가 숨겨진 캔버스 상에 드로잉된다. 드로잉된 동향 그래프는 동향 그래프의 엔드포인트 이미지로서 메모리 내에 버퍼링된다.
동향 그래프는 특정한 변수가 시간순으로 변하는 것을 보여주는 변화 추세 그래프이다. 동향 그래프가 디스플레이될 때에, 시간순으로 변동 추세를 점차적으로 형성하는 애니메이션 효과가 사용된다. 이에, 고정 디스플레이 위치 파라미터 및 가변 스크린샷 파라미터가 디스플레이 파라미터로서 사용될 수 있다. 각 프레임의 이미지의 상단 좌측 코너부의 디스플레이 위치 파라미터가 동향 그래프의 디스플레이 영역의 상단 좌측 코너부로서 고정된다. 동향 그래프의 길이가 상이한 일부 엔드포인트 이미지들이 동향 그래프의 엔드포인트 이미지의 좌측부터 시작해서 각 프레임에서 캡처되어 프레임 이미지로서 제공되며, 캡처되는 길이는 점차적으로 증가한다. 가능한 프레임 시퀀스가 도 3에 도시된다. 이와 같이, 동향 그래프의 디스플레이 영역에 일정 간격으로 다양한 프레임의 이미지가 연속적으로 디스플레이될 때에, 변동 추세가 시간순으로 발생하는 애니메이션 효과가 형성된다.
브라우저 페이지 상에 막대 그래프가 디스플레이되어야 할 경우, 막대 그래프의 디스플레이 영역과 동일한 크기의 숨겨진 캔버스가 생성되고, 서버로부터 수신된 막대 그래프의 그래픽 데이터에 기초하여, 도 4에 도시하는 바와 같이, 숨겨진 캔버스 상에 사용자에게 디스플레이될 최종 막대 그래프가 드로잉된다. 드로잉된 막대 그래프는 막대 그래프의 엔드포인트 이미지로서 메모리 내에 버퍼링된다.
막대 그래프는 특정의 시점에서 특정 변수의 값을 반영하는데 사용된다. 막대 그래프가 디스플레이될 때에, 막대를 최종값으로 오름차순으로 점차적으로 변화시키는 애니메이션 효과가 사용된다. 이에, 고정 디스플레이 위치 파라미터 및 가변 압축 파라미터가 디스플레이 파라미터로서 사용될 수 있다. 각 프레임의 이미지의 하단 좌측 코너부의 디스플레이 위치 파라미터가 막대 그래프의 디스플레이 영역의 하단 좌측 코너부로서 고정된다. 막대 그래프의 엔드포인트 이미지의 폭이 각 프레임마다 상이한 압축 비율로 압축된 후에 해당 프레임의 이미지가 생성되고, 압축비가 최종 프레임의 이미지의 압축 비율이 1이 될 때까지 점차적으로 감소한다. 가능한 각 프레임의 이미지 시퀀스가 도 5에 도시된다. 이와 같이, 막대 그래프의 디스플레이 영역에 일정 간격으로 다양한 프레임의 이미지가 연속적으로 디스플레이될 때에, 최종 값에 도달할 때까지 변수 값이 점차적으로 상승하는 애니메이션 효과가 형성된다.
전술한 절차 구현예에 상응하여, 본원의 구현예는 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 장치도 제공한다. 본 장치는 소프트웨어를 사용하여 구현될 수도 있고, 하드웨어를 사용하여 구현될 수도 있으며, 또는 하드웨어와 소프트웨어의 조합을 사용하여 구현될 수도 있다. 소프트웨어 구현을 예로 사용하면, 모바일 디바이스의 중앙처리장치(CPU)를 사용하여 대응하는 컴퓨터 프로그램 명령어를 메모리에 판독함으로써 논리적 장치가 취득된다. 하드웨어 구현의 관점에서는, 도 6에 도시하는 CPU, 메모리, 및 비휘발성 메모리 외에도, 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 장치가 위치해 있는 모바일 디바이스는 일반적으로 무선 신호를 송수신하기 위한 칩 등의 다른 하드웨어, 및/또는 네트워크 통신 기능을 구현하기 위한, 보드 카드 등의 다른 하드웨어도 포함한다.
도 7은 엔드포인트 이미지 생성 유닛 및 애니메이션 디스플레이 유닛을 포함하는, 본원의 구현예에 따른, 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 장치를 도시한다. 엔드포인트 이미지 생성 유닛은 숨겨진 캔버스 상에 디스플레이될 최종 이미지를 드로잉하고 드로잉된 이미지를 엔드포인트 이미지로서 저장하도록 구성된다. 애니메이션 디스플레이 유닛은 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 가변 디스플레이 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 엔드포인트 이미지의 적어도 일부를 프레임 단위로 디스플레이하도록 구성된다. 가변 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된다.
선택사항으로서, 디스플레이 파라미터는 엔드포인트 이미지를 프로세싱하여 각 프레임의 이미지를 취득하는데 사용되는 엔드포인트 프로세싱 파라미터와, 애니메이션 영역에서 각 프레임의 이미지의 디스플레이 위치를 결정하는데 사용되는 디스플레이 위치 파라미터를 포함하고, 인접한 프레임들은 엔드포인트 이미지 프로세싱 파라미터와 디스플레이 위치 파라미터 중 적어도 하나가 상이하다.
일례로, 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된 각 프레임의 스크린샷 파라미터와 디스플레이 위치 파라미터를 포함한다. 애니메이션 디스플레이 유닛은 구체적으로, 전체 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 스크린샷 파라미터에 기초하여 캡처된 엔드포인트 이미지의 일부를, 디스플레이 위치 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하도록 구성된다.
다른 예에 있어서, 디스플레이 파라미터는 애니메이션 효과와 스크린샷 파라미터에 기초하여 결정된 각 프레임의 디스플레이 위치 파라미터를 포함한다. 애니메이션 디스플레이 유닛은 구체적으로, 전체 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 스크린샷 파라미터에 기초하여 캡처된 엔드포인트 이미지의 일부를, 프레임의 디스플레이 위치 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하도록 구성된다.
또 다른 예에 있어서, 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된 각 프레임의 압축 파라미터와 디스플레이 위치 파라미터를 포함한다. 애니메이션 디스플레이 유닛은 구체적으로, 애니메이션 영역에 매칭되는 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 압축 파라미터에 기초하여 압축을 수행함으로써 취득된 엔드포인트 이미지를, 디스플레이 파라미터를 이용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하도록 구성된다.
선택사항으로서, 숨겨진 캔버스의 형상 및 크기는 애니메이션 영역의 형상 및 크기와 동일하다.
선택사항으로서, 본 장치는, 엔드포인트 이미지가 저장된 후에, 숨겨진 캔버스를 삭제하도록 구성되는 숨겨진 캔버스 삭제 유닛을 더 포함한다.
이상의 설명은 본원의 바람직한 구현예일 뿐이며, 본원을 제한하고자 하는 것은 아니다. 본원의 사상 및 원리에서 벗어나는 않고서 이루어지는 임의의 변형, 등가의 대체, 또는 개선 등은 모두 본원의 보호 범위에 속하는 것이다.
통상의 구성에 있어서, 컴퓨팅 디바이스는 하나 이상의 프로세서(CPU), 하나 이상의 입출력 인터페이스, 하나 이상의 네트워크 인터페이스, 및 하나 이상의 메모리를 포함한다.
메모리는 컴퓨터 판독 가능한 매체에 속하는 비영구성 메모리, 랜덤 액세스 메모리(RAM), 및/또는 리드 온리 메모리(ROM) 또는 플래시 메모리(플래시 RAM)) 등의 비휘발성 메모리를 포함할 수 있다. 메모리는 컴퓨터 판독 가능 매체의 일례이다.
컴퓨터 판독 가능 매체는 임의의 방법 또는 기술을 사용하여 정보 저장을 구현할 수 있는, 지속형, 비지속형, 분리형, 및 고정형 매체를 포함한다. 정보는 컴퓨터 판독 가능 명령어, 데이터 구조, 프로그램 모듈, 또는 기타 데이터일 수 있다. 컴퓨터 저장 매체의 예로는 상변화 랜덤 메모리(PRAM), 정적 랜덤 액세스 메모리(SRAM), 동적 랜덤 액세스 메모리(DRAM), 다른 유형의 랜덤 액세스 메모리(RAM), 리드 온리 메모리(ROM), 전기적 소거 가능한 프로그래머블 리드 온리 메모리(EEPROM), 플래시 메모리 또는 기타 메모리 기술, CD-ROM(compact disk read-only memory), DVD(digital versatile disc) 또는 기타 광학 스토리지, 자기 테이프, 자기 디스크 스토리지 또는 기타 자기 저장 디바이스, 또는 컴퓨팅 디바이스가 액세스할 수 있는 정보를 저장하도록 구성될 수 있는 기타 비전송 매체를 포함하지만, 이들에 한정되지 않는다. 본 명세서에 기술한 바와 같이, 컴퓨터 판독 가능한 매체는 변조된 데이터 신호 및 캐리어 등의 일시적 컴퓨터 판독 가능한 매체(일시적 매체)를 포함하지 않는다.
"포함(include, comprise)" 및 이것의 기타 변형형에 해당하는 표현은 비배타적인 포함(inclusion)을 망라하는 것이 의도되어, 일련의 요소를 포함하는 프로세스, 방법, 물품, 또는 장치는 이들 요소를 포함할 뿐만 아니라, 명시적으로 열거되지 않은 다른 요소도 포함하거나 그러한 프로세스, 방법, 물품 또는 장치의 고유한 요소를 더 포함하는 것을 알아야 한다. "...를 포함한다"가 붙은 요소는 더 많은 제약없이 그 요소를 포함하는 프로세스, 방법, 물품 또는 디바이스에서의 추가적인 동일한 요소들의 존재를 배제하지 않는다.
당업자라면 본원의 구현예가 방법, 시스템, 또는 컴퓨터 프로그램 제품으로서 제공될 수 있음을 이해해야 한다. 따라서, 본원은 하드웨어 전용 구현, 소프트웨어 전용 구현, 또는 소프트웨어와 하드웨어가 조합된 구현의 형태를 사용할 수 있다. 또한, 본원은 하나 이상의 컴퓨터 사용 가능한 저장 매체(디스크 메모리, CD-ROM, 광학 메모리 등을 포함하지만 이에 한정되지는 않음) 상에서 구현되는 컴퓨터 프로그램 제품의 형태를 사용할 수 있다.

Claims (20)

  1. 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 컴퓨터 구현 방법(computer-implemented method)에 있어서,
    하나 이상의 프로세서에 의해, 숨겨진 캔버스 상에 디스플레이될 엔드포인트 이미지를 포함한 드로잉(drawing)과 애니메이션 효과를 포함하는 사용자 입력을 수신하는 단계와,
    상기 하나 이상의 프로세서에 의해, 상기 엔드포인트 이미지를 복수의 프레임의 최종 프레임으로서 저장하는 단계와,
    상기 하나 이상의 프로세서에 의해, 애니메이션 효과에 기초하여 변하는 디스플레이 파라미터를 결정하는 단계로서, 상기 디스플레이 파라미터는 이미지 디스플레잉 파라미터와 디스플레이 위치 파라미터를 포함하는 것인, 상기 디스플레이 파라미터 결정 단계와,
    상기 하나 이상의 프로세서에 의해, 상기 엔드포인트 이미지의 가변 치수 비율을 사용해서 상기 엔드포인트 이미지의 적어도 일부를 프로세싱하여, 상기 복수의 프레임의 각각의 프레임에 대하여 상기 엔드포인트 이미지의 적어도 프로세싱된 부분을 생성하는 단계로서, 상기 가변 치수 비율은 상기 이미지 디스플레잉 파라미터에 기초하여 결정되며, 상기 이미지 디스플레잉 파라미터에 대응하는 엔드포인트 이미지의 애니메이션을 생성하도록 상기 복수의 프레임 사이에서 점차적으로 변하는 것인, 각각의 프레임에 대하여 상기 엔드포인트 이미지의 적어도 프로세싱된 부분을 생성하는 단계와,
    상기 엔드포인트 이미지가 디스플레이될 때까지, 상기 디스플레이 위치 파라미터를 사용하여 상기 복수의 프레임의 각각의 프레임을 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 단계
    를 포함하는, 컴퓨터 구현 방법.
  2. 제1항에 있어서, 상기 디스플레이 파라미터는, 상기 엔드포인트 이미지를 프로세싱하여 각 프레임의 이미지를 취득하는데 사용되는 엔드포인트 이미지 디스플레잉 파라미터와, 상기 애니메이션 영역에서 각 프레임의 이미지의 디스플레이 위치를 결정하는데 사용되는 디스플레이 위치 파라미터를 포함하고, 인접한 프레임들은 상기 엔드포인트 이미지 디스플레잉 파라미터와 상기 디스플레이 위치 파라미터 중 적어도 하나가 상이한, 컴퓨터 구현 방법.
  3. 제2항에 있어서, 상기 디스플레이 파라미터는 애니메이션 효과와 스크린샷 파라미터에 기초하여 결정된 각 프레임의 디스플레이 위치 파라미터를 포함하는, 컴퓨터 구현 방법.
  4. 제3항에 있어서, 상기 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 상기 엔드포인트 이미지의 적어도 일부를, 변하는 디스플레이 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 단계는,
    전체 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 스크린샷 파라미터에 기초하여 캡처된 엔드포인트 이미지의 일부를, 프레임의 디스플레이 위치 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 단계를 포함하는, 컴퓨터 구현 방법.
  5. 제2항에 있어서, 상기 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된 각 프레임의 압축 파라미터와 디스플레이 위치 파라미터를 포함하는, 컴퓨터 구현 방법.
  6. 제5항에 있어서, 상기 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 상기 엔드포인트 이미지의 적어도 일부를, 변하는 디스플레이 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 단계는,
    상기 애니메이션 영역에 매칭되는 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 압축 파라미터에 기초하여 압축을 수행함으로써 취득된 엔드포인트 이미지를, 상기 디스플레이 위치 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 단계를 포함하는, 컴퓨터 구현 방법.
  7. 제1항에 있어서, 상기 숨겨진 캔버스의 형상 및 크기는 상기 애니메이션 영역의 형상 및 크기와 동일한, 컴퓨터 구현 방법.
  8. 제1항에 있어서, 상기 엔드포인트 이미지가 저장된 후에, 상기 숨겨진 캔버스를 삭제하는 단계를 더 포함하는, 컴퓨터 구현 방법.
  9. 하나 이상의 명령어를 저장한 비일시적 컴퓨터 판독 가능한 매체에 있어서,
    상기 하나 이상의 명령어는,
    하나 이상의 프로세서에 의해, 숨겨진 캔버스 상에 디스플레이될 엔드포인트 이미지를 포함한 드로잉과 애니메이션 효과를 포함하는 사용자 입력을 수신하는 동작과,
    상기 하나 이상의 프로세서에 의해, 상기 엔드포인트 이미지를 복수의 프레임의 최종 프레임으로서 저장하는 동작과,
    상기 하나 이상의 프로세서에 의해, 애니메이션 효과에 기초하여 변하는 디스플레이 파라미터를 결정하는 동작으로서, 상기 디스플레이 파라미터는 이미지 디스플레잉 파라미터와 디스플레이 위치 파라미터를 포함하는 것인, 상기 디스플레이 파라미터 결정 동작과,
    상기 하나 이상의 프로세서에 의해, 상기 엔드포인트 이미지의 가변 치수 비율을 사용해서 상기 엔드포인트 이미지의 적어도 일부를 프로세싱하여, 상기 복수의 프레임의 각각의 프레임에 대하여 상기 엔드포인트 이미지의 적어도 프로세싱된 부분을 생성하는 동작으로서, 상기 가변 치수 비율은 상기 이미지 디스플레잉 파라미터에 기초하여 결정되며, 상기 이미지 디스플레잉 파라미터에 대응하는 엔드포인트 이미지의 애니메이션을 생성하도록 상기 복수의 프레임 사이에서 점차적으로 변하는 것인, 각각의 프레임에 대하여 상기 엔드포인트 이미지의 적어도 프로세싱된 부분을 생성하는 동작과,
    상기 엔드포인트 이미지가 디스플레이될 때까지, 상기 디스플레이 위치 파라미터를 사용하여 상기 복수의 프레임의 각각의 프레임을 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작
    을 포함하는 동작들을 수행하도록 컴퓨터 시스템에 의해 실행 가능한, 비일시적 컴퓨터 판독 가능한 매체.
  10. 제9항에 있어서, 상기 디스플레이 파라미터는, 상기 엔드포인트 이미지를 프로세싱하여 각 프레임의 이미지를 취득하는데 사용되는 엔드포인트 이미지 디스플레잉 파라미터와, 상기 애니메이션 영역에서 각 프레임의 이미지의 디스플레이 위치를 결정하는데 사용되는 디스플레이 위치 파라미터를 포함하고, 인접한 프레임들은 상기 엔드포인트 이미지 디스플레잉 파라미터와 상기 디스플레이 위치 파라미터 중 적어도 하나가 상이한, 비일시적 컴퓨터 판독 가능한 매체.
  11. 제10항에 있어서, 상기 디스플레이 파라미터는 애니메이션 효과와 스크린샷 파라미터에 기초하여 결정된 각 프레임의 디스플레이 위치 파라미터를 포함하는, 비일시적 컴퓨터 판독 가능한 매체.
  12. 제11항에 있어서, 상기 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 상기 엔드포인트 이미지의 적어도 일부를, 변하는 디스플레이 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작은,
    전체 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 스크린샷 파라미터에 기초하여 캡처된 엔드포인트 이미지의 일부를, 프레임의 디스플레이 위치 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작을 포함하는, 비일시적 컴퓨터 판독 가능한 매체.
  13. 제10항에 있어서, 상기 디스플레이 파라미터는 애니메이션 효과에 기초하여 결정된 각 프레임의 압축 파라미터와 디스플레이 위치 파라미터를 포함하는, 비일시적 컴퓨터 판독 가능한 매체.
  14. 제13항에 있어서, 상기 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 상기 엔드포인트 이미지의 적어도 일부를, 변하는 디스플레이 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작은,
    상기 애니메이션 영역에 매칭되는 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 압축 파라미터에 기초하여 압축을 수행함으로써 취득된 엔드포인트 이미지를, 상기 디스플레이 위치 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작을 포함하는, 비일시적 컴퓨터 판독 가능한 매체.
  15. 제9항에 있어서, 상기 숨겨진 캔버스의 형상 및 크기는 상기 애니메이션 영역의 형상 및 크기와 동일한, 비일시적 컴퓨터 판독 가능한 매체.
  16. 제9항에 있어서, 상기 동작들은, 상기 엔드포인트 이미지가 저장된 후에 상기 숨겨진 캔버스를 삭제하는 동작을 더 포함하는, 비일시적 컴퓨터 판독 가능한 매체.
  17. 컴퓨터 구현 시스템(computer-implemented system)에 있어서,
    하나 이상의 컴퓨터와,
    상기 하나 이상의 컴퓨터와 상호 동작 가능하게 결합되며, 하나 이상의 명령어를 저장한 유형의(tangible) 비일시적 머신 판독 가능한 매체를 구비하는 하나 이상의 컴퓨터 메모리 디바이스
    를 포함하고,
    상기 하나 이상의 명령어는 상기 하나 이상의 컴퓨터에 의해 실행될 때에,
    하나 이상의 프로세서에 의해, 숨겨진 캔버스 상에 디스플레이될 엔드포인트 이미지를 포함한 드로잉과 애니메이션 효과를 포함하는 사용자 입력을 수신하는 동작과,
    상기 하나 이상의 프로세서에 의해, 상기 엔드포인트 이미지를 복수의 프레임의 최종 프레임으로서 저장하는 동작과,
    상기 하나 이상의 프로세서에 의해, 애니메이션 효과에 기초하여 변하는 디스플레이 파라미터를 결정하는 동작으로서, 상기 디스플레이 파라미터는 이미지 디스플레잉 파라미터와 디스플레이 위치 파라미터를 포함하는 것인, 상기 디스플레이 파라미터 결정 동작과,
    상기 하나 이상의 프로세서에 의해, 상기 엔드포인트 이미지의 가변 치수 비율을 사용해서 상기 엔드포인트 이미지의 적어도 일부를 프로세싱하여, 상기 복수의 프레임의 각각의 프레임에 대하여 상기 엔드포인트 이미지의 적어도 프로세싱된 부분을 생성하는 동작으로서, 상기 가변 치수 비율은 상기 이미지 디스플레잉 파라미터에 기초하여 결정되며, 상기 이미지 디스플레잉 파라미터에 대응하는 엔드포인트 이미지의 애니메이션을 생성하도록 상기 복수의 프레임 사이에서 점차적으로 변하는 것인, 각각의 프레임에 대하여 상기 엔드포인트 이미지의 적어도 프로세싱된 부분을 생성하는 동작과,
    상기 엔드포인트 이미지가 디스플레이될 때까지, 상기 디스플레이 위치 파라미터를 사용하여 상기 복수의 프레임의 각각의 프레임을 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작
    을 포함하는 하나 이상의 동작을 수행하는, 컴퓨터 구현 시스템.
  18. 제17항에 있어서, 상기 디스플레이 파라미터는, 상기 엔드포인트 이미지를 프로세싱하여 각 프레임의 이미지를 취득하는데 사용되는 엔드포인트 이미지 디스플레잉 파라미터와, 상기 애니메이션 영역에서 각 프레임의 이미지의 디스플레이 위치를 결정하는데 사용되는 디스플레이 위치 파라미터를 포함하고, 인접한 프레임들은 상기 엔드포인트 이미지 디스플레잉 파라미터와 상기 디스플레이 위치 파라미터 중 적어도 하나가 상이한, 컴퓨터 구현 시스템.
  19. 제18항에 있어서, 상기 디스플레이 파라미터는 애니메이션 효과와 스크린샷 파라미터에 기초하여 결정된 각 프레임의 디스플레이 위치 파라미터를 포함하는, 컴퓨터 구현 시스템.
  20. 제19항에 있어서, 상기 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 상기 엔드포인트 이미지의 적어도 일부를, 변하는 디스플레이 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작은,
    전체 엔드포인트 이미지가 마지막으로 디스플레이될 때까지, 프레임의 스크린샷 파라미터에 기초하여 캡처된 엔드포인트 이미지의 일부를, 프레임의 디스플레이 위치 파라미터를 사용하여 일정한 간격으로 애니메이션 영역 내에 프레임 단위로 디스플레이하는 동작을 포함하는, 컴퓨터 구현 시스템.
KR1020197014230A 2016-10-19 2017-10-12 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법 및 장치 KR102139439B1 (ko)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
CN201610913050.8 2016-10-19
CN201610913050.8A CN107015788B (zh) 2016-10-19 2016-10-19 在移动设备上动画展现图像的方法和装置
PCT/CN2017/105811 WO2018072638A1 (zh) 2016-10-19 2017-10-12 在移动设备上动画展现图像的方法和装置

Publications (2)

Publication Number Publication Date
KR20190071764A KR20190071764A (ko) 2019-06-24
KR102139439B1 true KR102139439B1 (ko) 2020-07-30

Family

ID=59439108

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020197014230A KR102139439B1 (ko) 2016-10-19 2017-10-12 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법 및 장치

Country Status (9)

Country Link
US (1) US10573053B2 (ko)
EP (1) EP3531278A4 (ko)
JP (2) JP2020500357A (ko)
KR (1) KR102139439B1 (ko)
CN (1) CN107015788B (ko)
PH (1) PH12019500837A1 (ko)
SG (1) SG11201903476UA (ko)
TW (1) TWI686768B (ko)
WO (1) WO2018072638A1 (ko)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107015788B (zh) * 2016-10-19 2020-10-30 创新先进技术有限公司 在移动设备上动画展现图像的方法和装置
CN107908341B (zh) * 2017-09-30 2020-05-05 广州视睿电子科技有限公司 图像显示方法、***、计算机可读存储介质和计算机设备
CN109829956A (zh) * 2017-11-23 2019-05-31 腾讯科技（深圳）有限公司 数据显示方法、装置及电子设备
CN110969683A (zh) * 2018-09-30 2020-04-07 北京奇虎科技有限公司 一种动画生成方法、装置及电子设备
CN109783102B (zh) * 2019-01-18 2022-04-12 北京城市网邻信息技术有限公司 一种小程序中Canvas画布生成的方法、装置、设备和存储介质
CN111192349B (zh) * 2019-11-21 2024-02-20 深圳国匠云职业教育科技有限公司 一种发动机内燃运作的图像显示方法、***及终端
CN111078345B (zh) * 2019-12-18 2023-09-19 北京金山安全软件有限公司 一种图片展示效果确定方法、装置、电子设备及存储介质
JP7180050B2 (ja) * 2019-12-27 2022-11-30 株式会社覚王山総研 情報処理装置、情報処理方法およびプログラム
CN111273976A (zh) * 2020-01-09 2020-06-12 北京金山安全软件有限公司 一种动画轮播方法及装置
CN112435313A (zh) * 2020-11-10 2021-03-02 北京百度网讯科技有限公司 播放帧动画的方法、装置、电子设备及可读存储介质
CN113610947A (zh) * 2021-08-09 2021-11-05 平安国际智慧城市科技股份有限公司 动画生成方法、装置、计算机设备及存储介质
CN117115313B (zh) * 2023-10-23 2024-02-02 成都工业学院 一种动画帧图像显示时间优化方法、***、终端及介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080055315A1 (en) 2006-09-05 2008-03-06 Dale Ducharme Method and System to Establish and Animate a Coordinate System for Content on a Display
US20100110081A1 (en) 2008-10-30 2010-05-06 Microsoft Corporation Software-aided creation of animated stories
US20120013621A1 (en) 2010-07-15 2012-01-19 Miniclip SA System and Method for Facilitating the Creation of Animated Presentations
US20140028685A1 (en) 2008-10-17 2014-01-30 Marcos Weskamp Generating customized effects for image presentation
CN105988762A (zh) 2015-02-10 2016-10-05 腾讯科技（深圳）有限公司 动画帧的显示方法、隐藏方法及装置

Family Cites Families (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005303907A (ja) * 2004-04-15 2005-10-27 Fuji Photo Film Co Ltd 画像編集装置，方法およびプログラム
JP3846488B2 (ja) * 2004-05-10 2006-11-15 セイコーエプソン株式会社 画像データ圧縮装置、エンコーダ、電子機器及び画像データ圧縮方法
US8453148B1 (en) * 2005-04-06 2013-05-28 Teradici Corporation Method and system for image sequence transfer scheduling and restricting the image sequence generation
EP1995961A4 (en) * 2006-03-14 2012-08-15 Sony Corp IMAGE PROCESSING DEVICE AND METHOD
JP2009151896A (ja) * 2007-12-21 2009-07-09 Sony Corp 画像処理装置、動画再生装置、これらにおける処理方法およびプログラム
JP4623201B2 (ja) * 2008-10-27 2011-02-02 ソニー株式会社 画像処理装置、画像処理方法およびプログラム
JP2010244450A (ja) * 2009-04-09 2010-10-28 Yappa Corp 画像処理装置及び画像処理方法
US9672646B2 (en) * 2009-08-28 2017-06-06 Adobe Systems Incorporated System and method for image editing using visual rewind operation
CN102411791B (zh) * 2010-09-19 2013-09-25 三星电子（中国）研发中心 一种静止图像动态化的方法和设备
CN102903137B (zh) * 2011-07-27 2016-09-21 腾讯科技（深圳）有限公司 动画播放方法及***
CN103177465B (zh) * 2011-12-26 2016-04-13 腾讯科技（深圳）有限公司 动画控制方法及***
US20130263024A1 (en) * 2012-01-20 2013-10-03 Vistaprint Limited Organizing and Recalling Website Commands in a Website Under Contruction
US10359919B2 (en) * 2013-03-14 2019-07-23 Microsoft Technology Licensing, Llc Staged animation of charts for data updates
US9823810B2 (en) * 2013-04-26 2017-11-21 Samsung Electronics Co., Ltd. Electronic system with interface modification mechanism and method of operation thereof
CN104967893B (zh) * 2014-07-10 2019-03-29 腾讯科技（北京）有限公司 便携电子设备的视频生成方法和装置
CN104123742A (zh) * 2014-07-21 2014-10-29 徐才 一种将静态漫画图片转化为二维动画的方法和播放器
CN105786417B (zh) * 2014-12-19 2019-01-25 阿里巴巴集团控股有限公司 一种静态图片的动态显示方法、装置及设备
CN105988793A (zh) * 2015-02-11 2016-10-05 阿里巴巴集团控股有限公司 用于屏幕显示设备的图像展示方法及装置
CN105138213A (zh) * 2015-09-30 2015-12-09 天脉聚源（北京）科技有限公司 动态切换图片的方法和装置
CN105719332B (zh) * 2016-01-20 2019-02-19 阿里巴巴集团控股有限公司 色彩补间动画的实现方法和装置
CN107015788B (zh) * 2016-10-19 2020-10-30 创新先进技术有限公司 在移动设备上动画展现图像的方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080055315A1 (en) 2006-09-05 2008-03-06 Dale Ducharme Method and System to Establish and Animate a Coordinate System for Content on a Display
US20140028685A1 (en) 2008-10-17 2014-01-30 Marcos Weskamp Generating customized effects for image presentation
US20100110081A1 (en) 2008-10-30 2010-05-06 Microsoft Corporation Software-aided creation of animated stories
US20120013621A1 (en) 2010-07-15 2012-01-19 Miniclip SA System and Method for Facilitating the Creation of Animated Presentations
CN105988762A (zh) 2015-02-10 2016-10-05 腾讯科技（深圳）有限公司 动画帧的显示方法、隐藏方法及装置

Also Published As

Publication number Publication date
EP3531278A1 (en) 2019-08-28
KR20190071764A (ko) 2019-06-24
SG11201903476UA (en) 2019-05-30
PH12019500837B1 (en) 2019-11-25
US10573053B2 (en) 2020-02-25
JP2021157834A (ja) 2021-10-07
US20190251731A1 (en) 2019-08-15
WO2018072638A1 (zh) 2018-04-26
JP2020500357A (ja) 2020-01-09
EP3531278A4 (en) 2019-10-23
CN107015788A (zh) 2017-08-04
PH12019500837A1 (en) 2019-11-25
CN107015788B (zh) 2020-10-30
TW201816713A (zh) 2018-05-01
TWI686768B (zh) 2020-03-01

Similar Documents

Publication Publication Date Title
KR102139439B1 (ko) 모바일 디바이스 상에 이미지를 애니메이팅하기 위한 방법 및 장치
US9373308B2 (en) Multi-viewport display of multi-resolution hierarchical image
JP6062438B2 (ja) タイル単位レンダラーを用いてレイヤリングするシステムおよび方法
CN110377285B (zh) 一种生成页面骨架屏的方法、装置及计算机设备
WO2017177931A1 (zh) 一种文本信息的显示方法、装置和移动设备
US20130120460A1 (en) Animations for Scroll and Zoom
US20150243257A1 (en) Cross-Platform Rendering Engine
US9754392B2 (en) Generating data-mapped visualization of data
KR20200037887A (ko) 합성 화상을 생성하는 방법 및 장치
CN111752557A (zh) 一种展示方法及装置
JP6882992B2 (ja) 動画像をプレビューする方法及びデバイス、並びに表現パッケージを表示する方法及びデバイス
CN105787402B (zh) 一种信息展示方法及装置
US20160291846A1 (en) Generating carousel user interface with graphics processing unit
US20220121307A1 (en) Method and device of drawing handwriting track, electronic apparatus, medium, and program product
US20140304644A1 (en) Providing content rotation during scroll action
CN111951356B (zh) 基于json数据格式的动画渲染方法
CN107203434A (zh) 一种纹理共享的方法、装置以及计算机可读存储介质
KR101810019B1 (ko) 애니메이션 데이터 생성 방법, 장치, 및 전자 기기
CN109636885A (zh) 一种用于h5页面的序列帧动画制作方法和***
CN112328298A (zh) 移动端的代码库裁剪方法及装置
US10115012B1 (en) Capture object boundary jitter reduction
KR20160006965A (ko) 디스플레이 장치 및 이의 하이라이트 표시 방법
CN107621951B (zh) 一种视图层级优化的方法及装置
KR20230105534A (ko) 프레임 확장을 통한 렌더링 최소화 방법 및 프로그램과, 동 프로그램이 기록된, 컴퓨터 판독 가능한 기록 매체
CN110020285B (zh) 柱状图的处理方法及装置

Legal Events

Date Code Title Description
A201 Request for examination
A302 Request for accelerated examination
E701 Decision to grant or registration of patent right
GRNT Written decision to grant