파이어몽키 안드로이드 SDK Full Wrapper 파일

2014.05.21 11:32

RAD Studio XE7 에서는 Java2OP라는 이름으로 자바라이브러리를 델파이 브릿지 파일로 컨버젼하는 툴을 기본 제공합니다.

 - http://blog.hjf.pe.kr/268


아래 글은 XE6 이전 버전 사용자들이 참고할 수 있습니다.


파이어몽키 자료가 상당히 풍부한 FMXExpress(http://www.fmxexpress.com)에서 안드로이드 SDK 전체를 Object Pascal(Delphi)로 변환한 소스코드를 공개했습니다.

파이어몽키로 개발할 경우 제공되는 컴포넌트와 라이브러리 외에도 네이티브 SDK를 직접 제어할 수 있는데요. 그러기 위해서는 안드로이드 SDK를 오브젝트 파스칼에서 사용할 수 있도록 변환(Wrapping)하는 작업이 선행되어야 합니다.

FMXExpress에서는 Java2Pas(http://www.softwareunion.lu/en/downloads/)툴로 안드로이드 소스코드를 Object Pascal로 컨버팅 진행했습니다.



저작자 표시 비영리 동일 조건 변경 허락
신고

험프리.김현수 파이어몽키 SDK, 안드로이드, 파이어몽키

  1. Blog Icon
    에우로카엘

    참고들 하세요.

    uses 구문 때문에 circle error많이나서 하나하나 다 손봐줘야하고,

    xe6에선 androidapi.helpers에 jstring 변환함수 들어가있는데 xe5에 맞춰져있는 것 같네요.

MP4 Tag Library(Win32/64, OSX, iOS, Android 사용가능)

2014.03.13 09:23


http://www.3delite.hu/Object%20Pascal%20Developer%20Resources/download.html#mp4taglibrary

저작자 표시 비영리 동일 조건 변경 허락
신고

험프리.김현수 파이어몽키 Delphi, Firemonkey, 파이어몽키

RAD Studio, Delphi 그리고 C++빌더 로드맵

2014.03.05 10:06


RAD Studio, Delphi 그리고 C++빌더 로드맵이 발표되었습니다.


지난해 멀티플랫폼(파이어몽키)에 너무 치중한다는 일부우려가 있듯이 올해(2014년)에는 VCL과 RTL에도 발전이 있을 것 같아 기대가 되네요^^

2014년에 2번의 릴리즈를 통해 제공되는 기술과 기능들

  • 안드로이드를위한 완벽한 C + + 툴 체인
  • QPS (품질, 성능, 안정성)
  • 안드로이드와 아이폰 OS에 대한 광고 및 지불 구성 요소
  • 데이터 스냅 미들웨어 향상 (성능, REST 매핑, 아키텍쳐 개선)
  • 새로운 멀티 디바이스 비주얼 디자이너 및 새롭고, 유연한 사용자 인터페이스 구성 요소를 더 강화된 단일 소스 멀티 플랫폼 지원
  • Mobile Backend as a Service(MBaaS) 컴포넌트, Parse, Kinvey(모바일 클라우드 서비스 업체)와 같은 업체와 인터페이스
  • 모바일 및 데스크톱 응용 프로그램의 상호 운용성
  • 안드로이드 KitKat 지원
  • VCL 애플리케이션을 위한 사용하기 쉬운 윈도우 작업 표시 줄 컴포넌트
  • VCL 스타일의 개선과 인텔 태블릿환경의 윈도우에서의 VCL 어플리케이션 지원, 스타일과 센서 컴포넌트
  • 특정 폼 팩터, 특히 구글 글래스를 사용 할 수있는 안드로이드 장치에 대한 직접 지원
  • 아파치 HTTP 서버 모듈은 현재 ISAPI의 IIS 지원과 함께, 웹 브로커 및 데이터 스냅에 대한 지원
  • 다양한 Run time Library(RTL) 개선, XML, JSON 처리와 그외의 것들을 모든 플랫폼 구현을 개선
  • FireDAC 새로운 데이터베이스 버전에 대한 지원을 포함하여 기존 드라이버에 새 드라이버 및 개선,
  • 한 해 동안 구글과 애플에 의해 발표 될 것으로 예상 안드로이드와 아이폰 OS의 미래 버전을 지원합니다.
  • 블루투스 지원 (모바일 장치)
  • C + + 11 언어 사양을 완벽하게 지원 Win32에서의 C + + 컴파일러의 새로운 버전

원문 : http://edn.embarcadero.com/article/43677

번역 ; http://translate.google.com/translate?sl=en&tl=ko&js=n&prev=_t&hl=ko&ie=UTF-8&u=http%3A%2F%2Fedn.embarcadero.com%2Farticle%2F43677



저작자 표시 비영리 동일 조건 변경 허락
신고

험프리.김현수 RAD Studio 정보 C++빌더, Delphi, Firemonkey, Rad Studio, 델파이, 로드맵, 빌더, 엠바카데로, 파이어몽키

안드로이드 셋팅값 셋팅하기

2014.03.04 18:01


안드로이드의 설정값을 델파이 코드로 설정하는 방법을 안내해 줍니다.

샘플로 절전모드(자동 화면꺼짐)을 제어하는 부분을 설명합니다.


http://delphi.org/2014/03/setting-android-settings/

저작자 표시 비영리 동일 조건 변경 허락
신고

험프리.김현수 파이어몽키 Firemonkey, 안드로이드 설정, 파이어몽키

  1. Blog Icon

    비밀댓글입니다

Sheet Animation 컴포넌트(움직이는 캐릭터 컴포넌트) 소개

2014.02.27 13:04

안녕하세요. 험프리.김현수입니다. 


오늘은 필요할듯 말듯한 캐릭터 애니메이션 컴포넌트 하나  소개합니다. 


TSprite라는 컴포넌트인데요. 오른쪽처럼 사용됩니다.

동작원리는 한장의 이미지에서 영역을 이동하며 화면에 출력하는 방식입니다.


일반적으로 캐릭터 애니메이션이 게임같은 곳에서 많이 사용되는데요. 제가 생각하기론 앱의 기능을 소개하는 부분이나 움직이는 이모티콘 등에 활용한다면 앱의 완성도를 높이고, 풍부한 기능구현이 가능 할 것 같습니다.


오른쪽의 데모는 소스코드에 포함된 데모이구요. 뒤집기, 회전, 반전, 반복등의 기능을 자체 제공하고 있습니다.


아래와 같은 이미지가 순차적으로 표시됩니다.



컴포넌트를 다운로드 받으면 소스가 포함되어 있어 어떤식으로 구현되어 있는지 확인하실 수 있어 도움이 되실 것 같습니다.


설치안내

컴포넌트 설치 후 사용 시 몇가지 이슈가 있어 설치 및 대처방안을 남깁니다.


설치방법

  1. 아래에서 컴포넌트 다운로드 후 좋은(컴포넌트를 모아두는) 디렉토리로 이동합니다.(델파이에 경로 지정이 필요)
  2. source 디렉토리에서 FireBlaze.dpk를 열고 설치합니다.(프로젝트 메니저에서 Install 하면 됩니다.)
  3. 델파이에서 Tool > Options > Environment Options > Delphi Options > Library > Library path에 위의 source 경로를 추가합니다.
설치시 오류대응


만약 위와 같은 오류가 실행 시 발생하는 경우 아래의 단계를 진행하세요.

  1. FBSprite.pas 파일 오픈
  2. TSprite의 published 영역에 아래의 코드 추가
   property Position;
   property Width;
   property Height;


다운로드


참고링크



저작자 표시 비영리 동일 조건 변경 허락
신고

험프리.김현수 파이어몽키 Animation, Firemonkey, FMX, 컴포넌트, 파이어몽키

RESTful 웹서비스 연동(Rest Client 소개)

2014.02.24 23:21

현재 대상 서비스(discogs.com)에 인증 인터페이스가 추가되어 예제를 따라하면 인증오류가 발생합니다. 하지만 이 글을 통해 REST Client의 개념을 잡는데 도움이 될 것입니다.



안녕하세요. 험프리.김현수입니다.


모바일 개발 세미나 및 자료들에서 원격 데이터 연결 시 DataSnap을 강조하다 보니 원격지 데이터 연결 시 DataSnap만 써야 되는 것으로 오해가 종종있어, 기존 구성된 사이트에 RESTful(Http 요청)방식으로 연결하는 방법을 소개합니다.


여지껏 원격지 데이터를 받아오기 위해 일반적으로는 IdHttp 컴포넌트를 이용해 Get(또는 Post)하여 Response 데이터를 받아온 후 Parser를 이용해 데이터를 파싱하고, 파싱된 데이터를 사용하는 방법등 코딩 위의 방법이 대부분이었습니다.


이번에 소개해 드릴 컴포넌트는 XE5에서 새로 추가된 REST 컴포넌트입니다.


REST 컴포넌트는 RestClient, RestRequest, RestResponse 3가지 주요 컴포넌트를 주축으로 구성되어 있으며, 요청과 응답을 객체화 시키고, 응답의 경우 RESTResponseDataSetAdapter를 연결하여 사용자의 데이터 파싱없이 리스트 및 그리드에서 사용할 수 있는 DataSource로 데이터를 자동변환합니다. 


Source(대상) REST API 분석 및 준비

▶ 대상 사이트 API 분석

음반정보 제공 사이트인 discogs에 오픈된 API를 이용하겠습니다. 그중 Search API를 사용합니다.


대상정보

  • Request : http://api.discogs.com/database/search?q=psy&type=master&per_page=20
  • Response : JSON 포맷으로 응답, "results" 항목 이후의 배열데이터 사용(Search API 참고


REST Debugger을 실행하고 아래와 같은 정보를 입력합니다.(REST Debugger 설치 및 사용방법)

  • URL : http://api.discogs.com
  • Resource : database/search?q={query}&type=master&per_page={page}
    • query : psy
    • page : 20

[Send Request] 버튼을 누르고 응답이 성공한 경우 하단의 [Body] 탭에서 Root Element에 "results"를 입력 후 [Apply] 버튼을 누른 후 [Tabular Data] 탭으로 이동 후 목록이 표시되었는지 확인합니다.


(※ REST Debugger도 REST 컴포넌트 기반으로 개발되어 있습니다.)

REST 컴포넌트 추가

▶ 모바일 프로젝트 생성 및 데이터모듈 추가

새로운 프로젝트 생성 후 Data Module을 추가합니다.(Project Manager > Project 선택 > Add New > Other > Data Module)

아래와 같이 컴포넌트를 추가하고 속성값을 변경합니다.


RESTClient

  • BaseURL : http://api.discogs.com

RESTRequest

  • Client : RESTClient1
  • Resource : database/search?q={query}&type=master&per_page={page}
  • Params : query=psy, page=20

RESTResponse

RESTResponseDataSetAdapter

  • DataSet : ClientDataSet1
  • Response : RESTResponse1
  • RootElement : results

ClientDataSet

위와 같이 구성 후 RESTRequest1을 더블클릭(또는 우측마우스 > Execute) 하면 성공 시 "Response: 200 - HTTP/1.1 200 OK" 메시지가 실패 시 오류메시지가 표시됩니다.

연결이 성공한 경우 RESTResponse1의 Content항목을 선택하시면 응답받은 데이터를 확인할 수 있습니다.(만약, 목록이외의 항목이 필요한 경우 RESTResponse 컴포넌트의  Content 항목을 활용할 수도 있습니다.)

UI 구성(ListView 및 검색항목 추가)

위의 Data Module을 폼의 Uses 절에 추가합니다.(File > Use unit 후 선택)

(유닛명 및 컨트롤 명은 임의로 명명하였으니 본인의 이름으로 사용하세요.)

▶ 리스트 추가(ListView), 데이터연결

빈 폼에 ListView 하나 추가 후 align 속성을 "alClient"로 변경해 목록이 가득차도록 합니다. 

아래와 같이 DataModule의 ClientDataSet과 ListView의 LiveBinding을 연결해 리스트에 데이터를 표시합니다.


Live Binding 윈도우 표시하기 - Object Inspector 아래 Bind Visually를 누르면 메인폼 아래에 표시됩니다.


사실 위와 같이만 구성해도 얼마나 쉽게 원격지의 데이터를 사용할 수 있는지 느낌이 오실거에요.

▶ 검색 항목 추가

그럼 추가로 검색 UI를 추가하고 검색 인터페이스를 연동해보겠습니다.

검색 메소드 추가

DataModule 유닛의 public 절에 아래와 같이 검색용 Search메소드를 추가합니다.

type
  TDataModule9 = class(TDataModule)
    RESTClient1: TRESTClient;
    RESTRequest1: TRESTRequest;
    RESTResponse1: TRESTResponse;
    RESTResponseDataSetAdapter1: TRESTResponseDataSetAdapter;
    ClientDataSet1: TClientDataSet;
  private
    { Private declarations }
  public
    { Public declarations }
    procedure Search(AKeyword: string);
  end;

var
  DataModule9: TDataModule9;

implementation

{%CLASSGROUP 'FMX.Controls.TControl'}

{$R *.dfm}

{ TDataModule9 }

procedure TDataModule9.Search(AKeyword: string);
begin
    RESTRequest1.Params.ParameterByName('query').Value := AKeyword;
    RESTRequest1.Execute;
end;

위의 RESTRequest1.Params를 변경하고 실행(RESTRequest1.Execute;)하는 동작으로 요청 파라메터를 변경할 수 있습니다.

UI 추가

검색 키워드 입력을 위해  TEdit를 Form에 추가합니다.(가끔 ListView에 추가하는 경우가 있으니 주의하세요)

align 속성을 "alTop"으로 변경합니다.


Edit의 OnChange에 아래와 같이 코딩합니다.

procedure TForm8.Edit1Change(Sender: TObject);
begin
  DataModule9.Search(Edit1.Text);
end;

배포 및 확인

REST 컴포넌트를 이용한 경우 내부적으로 MIDAS를 이용하기 때문에 MIDAS Library를 함께 배포해야 합니다.

배포 메뉴에서 기능파일 추가(Project > Deployment > Add featured files) 메뉴를 이용해 MIDAS Library를 추가합니다.



기기배포 등의 확인 단계는 설명을 생략하니 각자의 디바이스에서 확인해 보시기 바랍니다.


목록표시 및 요청 등의 인터페이스를 설명하였습니다. 등록요청 등의 인터페이스는 위의 내용을 조금더 확장하시면 충분히 구현가능 하실 것 같습니다.


다음에는 XML을 이용한 외부 서비스 연동에 대해서도 살펴보도록 하겠습니다.


감사합니다.


관련정보


추가정보



    저작자 표시 비영리 동일 조건 변경 허락
    신고

    험프리.김현수 파이어몽키 Firemonkey, FMX, JOSN, REST Debugger, RESTCilient, RESTful, 파이어몽키

    모바일개발 심화

    2014.02.06 01:07



    안녕하세요. 험프리 김현수입니다.


    이글에는 안드로이드와 iOS 개발 시 참고 할만한 글들을 모으려 합니다.

    따라가기 형태가 아니며, 내용을 훑어 보시고 필요한 정보는 방문해서 지식을 얻으셨으면 좋겠습니다.


    (계속 작성 중입니다. 좋은 정보 있으면 댓글로 알려주세요.)


    공통기능

      Android 특화기능

      ▶ Android API 접근

      iOS 특화기능

      ▶ 외부 서비스 연동

      참고정보

      ▶ 공개 소스

      추가자료


      저작자 표시 비영리 동일 조건 변경 허락
      신고

      험프리.김현수 파이어몽키 android, Firemonkey, ios, Rad Studio, 네이티브개발, 델파이, 멀티플랫폼, 안드로이드, 파이어몽키

      1. 필요한 정보 남겨주시면 찾아서 추가하겠습니다. 조회 수는 많은데 의견이 너무 없네요^^ 많이 남겨 주세요.

      2. Blog Icon
        반벽이

        델파이로 안드로이드 어플개발에 필요한 정보가 많이 있어서 감사한 마음으로 보고 있습니다
        선리플 후 의견 더 달아볼께요~^^ 감사합니다.

      3. 도움이 되셨다니 너무 좋습니다. 앞으로도 꾸준한 정보 기대하세요^^

      파이어몽키 모바일(iOS, Android)에서 사용자 파일 배포 및 사용

      2013.12.27 11:15

      사진 및 스타일파일등을 앱에 포함해서 배포할 일이 있습니다.

      iOS와 안드로이드에서 사용자의 파일을 배포하고 사용하는 방법입니다.


      우선 배포할 파일을 준비합니다.

      배포파일 추가는 IDE 메인메뉴에서 Project > Deployment 메뉴를 통해 할 수 있습니다.



      위의 Add files 버튼을 누르고 열기대화상자에서 배포할 파일을 선택합니다. 파일이 추가되면 목록에서 추가한 파일을 선택하고

      아래와 같이 플랫폼을 iOS와 Android로 선택하고 Remote Path를 변경합니다.



      iOS 배포파일 추가

      Platform - [iOSDevice, iOSSimulator]

      Remote Path - StartUp\Documents


      Android 배포파일 추가

      Platform - [Android]

      Remote Path - assets\internal


      배포파일을 코드에서 사용하려면 아래와 같은 코드로 가능합니다.


      uses
        System.IOUtils;
      
      procedure TForm3.Button1Click(Sender: TObject);
      begin
        Image1.Bitmap.LoadFromFile(TPath.Combine(TPath.GetDocumentsPath, 'Koala.jpg'));
      end;


      관련글



      저작자 표시 비영리 동일 조건 변경 허락
      신고

      험프리.김현수 파이어몽키 Deployment, Firemonkey, 파이어몽키

      [후기] RAD Studio XE3.5 - Delphi for iOS

      2013.03.08 13:04

      3월 8일 데브기어가 주관하는 델파이 세미나가 진행되었습니다.


      주요 주제는 Delphi for iOS(with Firemonkey)였습니다.


      Firemonkey란?


      하나의 델파이(또는 C++) 소스로 Win32, Win64, OSX(MacOS), iOS, Android(준비 중)에서 실행 가능한 어플리케이션을 개발 할 수 있는 Native Compiler 프레임웍입니다.


      세미나 내용이 궁금하신 분들이 계실 것 같아 기록합니다.

      개인적으로 생각나는 부분만 적으니 내용이 다소 다를 수도 있습니다.


      발표자는

      옆집 아저씨같은 푸근한 인상의 고든 리(Gordon Li)님이 진행하셨구요.

      고드 리는 엠바카데로 중국, 대만, 아세안 지역의 수석 에반젤리스트로 활동 중이라고 합니다.



      여러 주제의 세션이 있었지만 시간에 얽매이지 않고 흐름에 맞게 진행되어 괜찮았지요.


      생각나는 내용만 간단하게 적어보겠습니다.




      | 첫번째 주제는 "멀티 디바이스"


      • 태블릿과 노트북 중 태블릿 비율이 50%를 넘어가는 시기(2013년)
      • 전문가들은 2012년 초에는 2016년으로 예상, 2012년 중후반에는 2015년으로 예상
      • 하지만 2013년 1월에는 올해(2013년)이 50%이상을 태블릿이 점유할 것으로 예상

      • 향후 새로운 스마트 기기(iWatch, Start TV..)가 빠른 속도로 추가됨이 예상
      • 다른 언어와 다르게 파이어몽키는 
        One Source, Multi platform, Multi device 개발 가능
      • 네이티브 개발 만이 사용자의 빠른 반응 속도로 좋은 UX 제공 가능

      • 현재 Mobile Studio는 Beta 테스트 중 (XE3.5 Beta 9)
      • 올 하반기 XE4 발표 예상
      • Android 버전은 개발완료 테스트 중




      | 샘플시연


      • Stylelookup으로 아이폰에 맞는 UI를 Properties에서 변경 후 iOS Emulator 및 iPhone에서 실행
      • Standard Action으로 플랫폼의 특화 기능(사진찍기, 사진불러오기, 공유 등)을 사용
      • 사진찍기, 사진불러오기 및 애니메이션, Effect 시연
      • REST API와 JSON을 통해 데이터 수신 후 WebBrowser에 구글맵 출력
      • TabControl 및 ListBox등 아이폰 친화 UI 구현
      • 보통 대만에서 시연하면 박수와 함성이 터지는데 한국사람은 자기를 싫어하는 것 같다며 호응 유도
      • 샘플의 기능을 XCode 6년차 개발자와 누가 먼저 만드는지 내기
      • Firemonkey 하루, XCode 약 2주 걸렸다 함
      • 단편적인 비교인 듯, 반대의 경우(XCode 개발하기 쉬운 기능을 Firemonkey로 쉽게 개발 할 수 있을까?)는 어떨까 생각해 봄

      | 차세대 컴파일러


        • LLVM 차세대 컴파일러 명 = NextGen
          • Classic compiler : Win32, Win64, OSX, iOS Emulator
          • NextGen compiler : iOS, Android


        • 향후 Classic compiler 영역도 차츰 NextGen으로 교체 예정
        • C++ Builder 64bit에서 2~10배의 성능을 확인 함
        • LLVM의 가비지콜렉션에 의한 제한이 있음
          • Pointer 사용을 제한할 것
          • Static array 대신 Dynamic array를 사용할 것
          • With문을 없앨 것

        | 기타


          • 파이어몽키 관련 도서를 데브기어에서 번역 중
          • 번역 완료 후 이북형태로 무료 배표 예정
          • (Q&A)애플과 계약된 PAS Bridge(?)로 PAServer가 막힐 일은 없을 것으로 예상
          • (Q&A)앱의 속도는 Native API를 직접 호출 하므로 XCode로 작성하는 것과 비슷할 것이라 함

          | 총평


            엠바카데로에서 파이어몽키에 사할을 거는 듯한 느낌입니다. 
            초반에 고든 리가 어찌나 파이어몽키가 좋다고 자랑을 하기도 하고, David I의 31일 비디오(http://tech.devgear.co.kr/11735)를 봐도 이전과는 다른 엠바카데로의 모습인 것 같습니다.

            기능적인 부분에서는 
            기본적으로 캡슐화 되어 제공되는 플랫폼의 특화 기능이 참 편리하고 좋을 듯하지만, 그 기능 이외의 작업을 추가해야 할 경우 대부분의 개발자는 멘붕이 올듯 함(기본지식이 없이 제공해주는 것만 사용하므로 기본기능 제어가 힘들 듯)

            마지막으로
            개발 업체들을 얼마나 파이어몽키로 끌어 올 수 있는가가 성공의 관건일 듯 합니다.
            저는 개인적으로 그리 낙관적이지 않다고 생각합니다.
            긴시간 델파이의 VCL에 익숙해진 개발자(특히 SI 업체)와 업체들이 문법만 같은 새로운 프레임웍을 자발적으로 사용할지 의문이네요.
            차라리 요즘 추세와 같이 오픈소스 개발자나 개인 개발자들을 독려하여 흥미를 유발시켜,
            레퍼런스나 참고자료가 어느정도 쌓여야만 업체나 기존 개발자들도 관심을 갖고 들여다 보지 않을까 생각합니다.

            그러기 위해서는 라이센스 정책도 좀 더 유연하게(예를 들면 저렴한 개인 라이센스 등: Starter Edition처럼 기능 다 막아놓은것 말고) 델파이 빠들에 프렌들리하게 다가가야 하지 않을까 개인적으로 생각하며 마칩니다.


            저작자 표시 비영리 동일 조건 변경 허락
            신고

            험프리.김현수 교육, 세미나 Delphi, Delphi for iOS, Firemonkey, ios개발, NextGen, Rad Studio, XE3.5, 파이어몽키

            1. Blog Icon
              O*X

              수고하셨습니다.^^
              세미나 내용이 궁금했는데 이렇게 정리 한 글 보니 도움이 많이 돼네요. ㅎ
              국내에는 업체들의 개발 플랫폼이 델파이7에 고착되어 유지 보수의 성향이 심하다 보니,
              Delphi IDE 변화나 플랫폼 업그레이드 변화에 따른 대응이나 실험적인 측면이 더딘 감이 많은것 같네요. 저희 회사도 마찬가지로 델파이7에서 현재는 XE2로 컨버전 작업이 조금씩은 이루어 지고 있답니다.

              아무쪼록 Delphi가 국내 환경에서 관심을 많이 받았으면 하는 바램이랍니다.

              앞으로도 좋은 글 부탁드려요~

            2. 감사합니다. 생각보다 많은 분들이 관심을 갖어 주셔서. 글을 쓴 보람을 느끼네요.

              앞으로도 파이어몽키, 델파이 관련 글들 꾸준히 남길테니 관심 부탁드립니다. 감사합니다.^^

            3. 데브기어에서 제공하는 파이어몽키 이북 링크 입니다.
              http://bit.ly/VNzUQL

            [FMX] 다이나믹한 UI 효과 - Float animation effect

            2013.03.05 16:35

            대부분의 분들은 파이어몽키로 멀티플랫폼 지원을 위한 개발을 생각하고 계실텐데요.

            파이어몽키는 멀티플랫폼 기능외에도 다양한 기능이 포함되어 있습니다.


            대표적으로 

            3D 효과 및 벡터형식의 부드러운 출력, RoateAngle 및 Scale 등의 신규 속성 등이 추가되었습니다.


            오늘은 

            새로운 기능 중 하나인 FloatAnimation에 대해 소개하려 합니다.


            FloatAnimation은 단어 그대로 Float을 Animation하는 놈입니다.


            좀 더 자세히 설명하면, 

            지정한 Start와 Stop에 해당하는 Float 값사이를 지정된 시간(Duration)에 맞춰 다양한 효과(Interpolation: 보간)로 값을 변경하는 놈입니다.


            우선 샘플을 보시면 아래의 영상은 마우스 휠(업/다운) 시 마우스 주변에 효과를 주고. 특정 Zoom 이상인 경우 RoundRect 메시지를 표시하고 서서히 사라지는 효과를 주었습니다.

            (구현 내용은 아래 첨부한 소스파일을 참고하시구요.)


            FloatAnimation은 TAniThread(FMX.Types.pas)에 의해 쓰래드로 진행이 되어 

            다른작업에 영향을 주지 않고도 UI에 다양한 효과 및 재미난 기능을 매우 쉽게 넣을 수 있습니다.


            FloatAnimation을 사용하는 방법은 두가지 인데요.


            첫째, 

            애니메이션 효과를 줄 컨트롤의 자식으로 TFloatAnimation을 등록 후 설정하여 사용하는 방법

            둘째,

            애니메이션 효과를 줄 컨트롤에 .AnimationFloat() 메소드를 이용하여 직접 효과를 주는 방법


            두개 중 편리한 방법을 사용하시면 될 것 같습니다.


            아래의 영상은

            AnimationType과 TInterpolationType을 지정하고 어떤 효과가 나는지 확인하는 샘플입니다.

            (당겼다가 가기[Back], 공튀기기[Bounce] 등의 효과를 확인 할 수 있습니다.)


            그리고 위 영상의 주요코드


            uses
              System.TypInfo;
            
            procedure TForm3.FormCreate(Sender: TObject);
            var
              Animation: TAnimationType;
              Interpolation: TInterpolationType;
            begin
              Circle1.Position.X := 0;
              Circle1.Position.Y := (Panel1.Height - Circle1.Height) / 2;
            
              // Circle이 멈출 위치를 계산
              FLastValue := Panel1.Width - Circle1.Width;
            
              // 콤보박스에 속성을 표시합니다.
              for Animation in [Low(TAnimationType)..High(TAnimationType)] do
                cbbAnimation.Items.AddObject(GetEnumName(TypeInfo(TAnimationType), Ord(Animation)), TObject(Animation));
              cbbAnimation.ItemIndex := 0;
            
              for Interpolation in [Low(TInterpolationType)..High(TInterpolationType)] do
                cbbInterpolation.Items.AddObject(GetEnumName(TypeInfo(TInterpolationType), Ord(Interpolation)), TObject(Interpolation));
              cbbInterpolation.ItemIndex := 0;
            end;
            
            procedure TForm3.Button1Click(Sender: TObject);
            begin
              if rbTFloatAnimation.IsChecked then
              begin
                FloatAnimation1.PropertyName := 'Position.X';
                FloatAnimation1.StartValue := 0;
                FloatAnimation1.StopValue := FLastValue;
                FloatAnimation1.Duration := 1;
                FloatAnimation1.AnimationType := TAnimationType(cbbAnimation.Items.Objects[cbbAnimation.ItemIndex]);
                FloatAnimation1.Interpolation := TInterpolationType(cbbInterpolation.Items.Objects[cbbInterpolation.ItemIndex]);
                FloatAnimation1.Start;
              end
              else
              begin
                Circle1.Position.X := 0;
                Circle1.AnimateFloat(
                    'Position.X',
                    FLastValue,
                    1,
                    TAnimationType(cbbAnimation.Items.Objects[cbbAnimation.ItemIndex]),
                    TInterpolationType(cbbInterpolation.Items.Objects[cbbInterpolation.ItemIndex])
                );
              end;
            end;
            

            사용방법은 어렵지 않습니다.

            그래도 다양한 효과를 위해서는 TInterpolationType과 TAnimationType을 잘 설정해 주어야 합니다.

            글로 설명하는 것 보다 샘플프로그램 다운로드하셔서 실행해 보시는게 좋을 것같네요.


            샘플프로그램 실행파일 

            FloatAnimation.zip


            샘플프로그램 소스파일

            FloatAnimationSrc.zip


            경고창 애니메이션 효과 소스

            ThAlertAnimation.pas

            Zoom 애니메이션 효과 소스

            ThZoomAnimation.pas


            아래는 엠바카데로의 도움말입니다. 참고하세요.


            http://docwiki.embarcadero.com/Libraries/XE3/en/FMX.Types.TInterpolationType

            Value Meaning

            itLinear

            A linear interpolation. The property value this animation applies to changes constantly over time.

            itQuadratic

            A quadratic function is applied to the path between the start and stop points. The slope of the path is zero at the start point and increases constantly over time. A scalar is applied to the function to make the endpoint fall on the path.

            itCubic

            The interpolation is of the form y = x**3. The slope of the path is zero at the start point and increases much faster than the quadratic function over the path.

            itQuartic

            The interpolation is of the form y = x**4. The slope of the path is zero at the start point and increases much faster than the quadratic function over the path.

            itQuintic

            The interpolation is of the form y = x**5. The slope of the path is zero at the start point and increases much faster than the quadratic function over the path.

            itSinusoidal

            The interpolation is of the form y = sin(x). The slope of the path is zero at the start point and places the first inflexion of the sin curve (x=pi) at the stop point.

            itExponential

            The interpolation is of the form y = e**x. The slope of the path is one at the start point and increase much faster than the quadratic function over the path.

            itCircular

            The path between the start and stop point for this interpolation is a quarter of a circle. The slope of the path is zero at the start point and verticle at the stop point.

            itElastic

            The path does not follow a geometric interpolation. The value (y coordinate) may decrease, moving back toward the Start Value, but time (x value) must always move in a positive direction.

            itBack

            The path does not follow a geometric interpolation. The value (y coordinate) may decrease, moving back toward the Start Value, but time (x value) must always move in a positive direction.

            itBounce

            The path depicts a bouncing ball. The path is made up of circular curves with curvature away from the straight line that connects the start and stop points. These curves are connected by sharp points.


            http://docwiki.embarcadero.com/Libraries/XE3/en/FMX.Types.TAnimationType

            Value Meaning

            atIn

            The curve that applies to the TInterpolationType for this animation starts at the starting value of the property animated.

            atOut

            The curve that applies to the TInterpolationType for this animation starts at the ending value of the property animated and proceeds backwards to the starting value.

            atInOut

            The curve that applies to the TInterpolationType for this animation starts at both the starting value and the ending value of the property animated and meets at the center point.


            저작자 표시 비영리 동일 조건 변경 허락
            신고

            험프리.김현수 파이어몽키 Animation Effect, AnimationFloat, Dynamic UI, Firemonkey, FloatAnimation, FMX, 파이어몽키

            [FMX,VCL 비교] #1 VCL의 Canvas와 FMX의 Canvas 차이

            2012.06.20 12:52

            파이어몽키로 작업하다보면 VCL과의 차이점으로 어려움을 겪는 경우가 많습니다.

            그동안 작업하며 습득한 차이점을 한가지한가지 풀어놓으려 합니다.

            그중 첫번째 Canvas 입니다.

            일반적으로 TImage에 Drawing을 하는 예제로 구성하였습니다.
            VCL과 FMX의 동일한 기능을 구현했으니 비교해 보시면 좋을 것 같습니다.

            FMX 코딩시 주의점

            1, TImage.Picture.Bitmap => TImage.Bitmap : VCL의 Picture 객체가 빠졌습니다.

            2, Bitmap.Canvas.BeginScene ~ EndScene, Bitmap.BitmapChange : Canvas에 그리기고 화면에 표시하기 위한 절차입니다.

            3, Brush => Fill, Pen => Stroke 등으로 속성들이 약간씩 변했습니다.

            4, MoveTo, LineTo => DrawLine

            5, FMX의 기본적인 좌표가 Single 형이기 때문에 Bitmap의 Pixel 단위인 Integer로 형변환(Round, Trunc)이 필요합니다.


             이하 소스코드 입니다. 빈프로젝트에 아래 소스 복사하면 컴파일 됩니다.(Unit명만 주의) 폼에 컨트롤이 없습니다.

            | VCL Canvas Freeline Draw

            unit Unit1;
            
            interface
            
            uses
              Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
              Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.ExtCtrls;
            
            type
              TForm1 = class(TForm)
                procedure FormCreate(Sender: TObject);
              private
                { Private declarations }
                FDownPos: TPoint;
                FImage: TImage;
            
                procedure MouseDown(Sender: TObject; Button: TMouseButton;
                  Shift: TShiftState; X, Y: Integer);
                procedure MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
              public
                { Public declarations }
              end;
            
            var
              Form1: TForm1;
            
            implementation
            
            {$R *.dfm}
            
            procedure TForm1.FormCreate(Sender: TObject);
            begin
              FImage := TImage.Create(Self);
              FImage.Parent := Self;
              FImage.Align := alClient;
              FImage.OnMouseDown := MouseDown;
              FImage.OnMouseMove := MouseMove;
              FImage.Picture.Bitmap.SetSize(FImage.Width, FImage.Height);
              FIMage.Picture.Bitmap.Canvas.Brush.Color := clBlack;
              FImage.Picture.Bitmap.Canvas.FillRect(FImage.ClientRect);
              FImage.Visible := True;
            end;
            
            procedure TForm1.MouseDown(Sender: TObject; Button: TMouseButton;
              Shift: TShiftState; X, Y: Integer);
            begin
              if ssLeft in Shift then
                FDownPos := Point(X, Y);
            end;
            
            procedure TForm1.MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
            begin
              if ssLeft in Shift then
              begin
                with FImage.Picture.Bitmap.Canvas do
                begin
                  Pen.Color := clRed;
                  Pen.Width := 3;
                  MoveTo(FDownPos.X, FDownPos.Y);
                  LineTo(X, Y);
                end;
            
                FDownPos := Point(X, Y);
              end;
            end;
            
            end.
            


            | FMX Canvas Freeline Draw

            unit Unit2;
            
            interface
            
            uses
              System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
              FMX.Types, FMX.Controls, FMX.Forms, FMX.Dialogs, FMX.Objects;
            
            type
              TForm2 = class(TForm)
                procedure FormCreate(Sender: TObject);
              private
                { Private declarations }
                FDownPos: TPointF;
                FImage: TImage;
            
                procedure MouseDown(Sender: TObject; Button: TMouseButton;
                  Shift: TShiftState; X, Y: Single);
                procedure MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
              public
                { Public declarations }
              end;
            
            var
              Form2: TForm2;
            
            implementation
            
            {$R *.fmx}
            
            procedure TForm2.FormCreate(Sender: TObject);
            begin
              FImage := TImage.Create(Self);
              FImage.Parent := Self;
              FImage.Align := TAlignLayout.alClient;
              FImage.OnMouseDown := MouseDown;
              FImage.OnMouseMove := MouseMove;
              FImage.Bitmap.Create(Round(FImage.Width), Round(FImage.Height));
              FImage.Bitmap.Canvas.BeginScene;
              FImage.Bitmap.Canvas.Fill.Color := claBlack;
              FImage.Bitmap.Canvas.FillRect(FImage.ClipRect, 0, 0, AllCorners, 1);
              FImage.Bitmap.Canvas.EndScene;
              FImage.Visible := True;
            
            end;
            
            procedure TForm2.MouseDown(Sender: TObject; Button: TMouseButton;
              Shift: TShiftState; X, Y: Single);
            begin
              if ssLeft in Shift then
                FDownPos := PointF(X, Y);
            end;
            
            procedure TForm2.MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
            begin
              if ssLeft in Shift then
              begin
                with FImage.Bitmap.Canvas do
                begin
                  BeginScene;
                  Stroke.Color := claRed;
                  StrokeThickness := 3;
                  DrawLine(FDownPos, PointF(X, Y), 1);
                  EndScene;
                end;
                FImage.Bitmap.BitmapChanged;
            
                FDownPos := PointF(X, Y);
              end;
            end;
            
            end.
            



            신고

            험프리.김현수 파이어몽키 Canvas, Firemonkey, FMX, FMX VCL 차이, 파이어몽키