środa, 30 grudnia 2015

Android - animacje

Trochę notatek nt. animacji w Android. Odnajdziemy tu pewne formy przypominające te znane z XAML, niemniej jednak dualizm postaci i pewne ich ograniczenia (np. kwestia klikania w animacji widoku, udział kodu nawet przy używaniu XML-a, jest stretch?) powodują, że nie wydają mi się lepsze.

 

Android Animation

-> View Animation

-> Tween Animation  (jedna lub więcej transformacji w jednym widoku; obroty, skalowanie, translacje, znikanie)

-> Frame Animation

-> Property Animation

 

View animation

animują tylko obiekty View, wyłącznie kilka aspektów (np. skalowanie, rotacja), propercja View się nie zmienia (jedynie widok jest przerysowany)

 

Tween animation

implementacja:  plik XML w res/anim lub kod Java

<alpha

xmlns:android=”http://schemas.android.com/apk/res/android”

android:fromAlpha  //float 0.0 – 1.0

android:toAlpha

android:duration=”300”  //300ms

android:repeatMode=”restart” (jeszcze raz) lub “reverse”

android:repeatCount=”1”

>

<scale>

android:fromXScale

android:toXScale

android:fromYScale

android:toYScale

android:pivotX  //środek 50%

android:pivotY

<translate>

android:fromXDelta  //float lub %

android:toXDelta

android:fromYDelta

android:toYDelta

<rotate>

android:fromDegrees

android:toDegrees

android:pivotX

android:pivotY

 

grupowanie w <set>

mScaleAnim = AnimationUtils.loadAnimation(this, R.anim.scale_anim);

mImageView.startAnimation(mScaleAnim);

 

animation listener – notyfikacje o zakończeniu / powtórzeniu animacji

implements Animation.AnimationListener

mScaleAnim.setAnimationListener(this);

@Override

public void onAnimationEnd(Animation anim)  //niewywoływane przy ilości powtórzeń INFINITE

onAnimationRepeat(Animation anim)

onAnimationStart(Animation anim)

 

AlphaAnimation(float fromAlpha, float toAlpha)

 

mScaleAnim = new ScaleAnimation(

1.0f, 1.5f,

1.0f, 1.5f,

Animation.RELATIVE_TO_SELF, 0.5f,

Animation.RELATIVE_TO_SELF, 0.5f

);

mScaleAnim.setDuration(1000);

mScaleAnim.setFillAfter(true);

 

frame animation

sekwencja klatek w XML

res/drawable/filename.xml

 

<animation-list>

jeden lub więcej <item>

android:oneshot  - wykonanie raz lub zapętlenie

 

<item>

android:drawable=”@drawable/frame1”  - zasób graficzny

android:duration

 

imageView.setBackgroundResource(R.drawable.frame);

AnimationDrawable frameAnimation  = (AnimationDrawable) imageView.getBackground();

if (!frameAnimation.isRunning())  frameAnimation.start();

 

po przesunięciu animacją obrazek z obsługą klikania obsługuje klikanie w “starym” miejscu

 

interpolators 

definiują stopień zmiany (np. akceleracja itd.)

AccelerateDecelerateInterpolator     @android:anim/accelerate_decelerate_interpolator

AccelerateInterpolator

AnticipateInterpolator

AnticipateOvershootInterpolator

BounceInterpolator

CycleInterpolator

DecelerateInterpolator

LinearInterpolator

OvershootInterpolator

 

<set> – zbiór animacji prostych lub <set>

android:interpolator – także w animacjach prostych

android:sharedInterpolator  - współdzielenie pomiędzy wszystkimi dziećmi

android:fillAfter

android:startOffset

 

property animations

zmiana wartości w czasie, do obiektów wizualnych i niewizualnych

klasy:

1. Value Animator (int, float, object)

2. Object Animator

3. Animator Set

wykonanie:

plik XML w folderze res/animator

plik Java

 

Value Animator

nie operuje bezpośrednio na obiektach, wymaga listenerów

 

Object Animator

podklasa Value Animator

ObjectAnimator.ofType(object, “propertyName”, [starting Value], ending value);

ObjectAnimator animator = ObjectAnimator.ofFloat(tv, “x”, 50f, 150f);

animator.setDuration(2000);

animator.start();

nie wymaga listenerów

<objectAnimator

android:propertyName=””  //alpha | rotation | rotationY | rotationX | scaleX | scaleY | translationX | translationY | x | y (translacja względem kontenera)

android:duration=””

android:valueFrom=””

android:valueTo=””

android:startOffset=””

android:repeatCount=””

android:repeatMode=””  //repeat | reverse

android:valueType=”” // intType | floatType

/>

<set> - może skupiać także <objectAnimator>

android:ordering  // sequentially | together

Animator anim = AnimatorInflater.LoadAnimator(this, R.animator.rotate);

anim.setTarget(mImage);

anim.start();

 

AnimatorSet rootSet = new AnimatorSet();

rootSet.play(rotate /*object animator*/).before(childSet);

childSet.play(scaleX).with(scaleY);

rootSet.start();

 

prawidłowe klikanie na przesunięty obrazek przez property animation

 

Evaluators

wyliczanie wartości dla propercji w czasie

pomoc w animacji kolorów ARGB i obiektów Rect z metodą ofObject

rodzaje:

IntEvaluator

FloatEvaluator

ArgbEvaluator

TypeEvaluator – interfejs dla własnego ewaluatora dla propercji o typach innych niż int, float czy kolor

ObjectAnimator anim = ObjectAnimator.ofObject(target, “backgroundColor”, new ArgbEvaluator(), Color.RED, Color.GREEN);

 

Tranzycje między ekranami

startActivity(new Intent(MainActivity.this, SecondActivity.class));

overridePendingTransition(R.anim.activity_open_translate /*wejście SecondActivity*/,  R.anim.activity_close_scale /*wyjście z MainActivity*/);   //animacje view

android:aduration = “@android:integer/config_longAnimTime

 

Animacje w cyklu życia

animation.com.recycleviewanim

<android.support.v7.widget.RecyclerView

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:id=”@+id/recycleView”>

</android.support.v7.widget.RecyclerView>

CustomAdapter mAdapter = new CustomAdapter(this, new Data().getData());

mRecyclerView.setAdapter(mAdapter);

mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

animacje elementów podczas przewijania listy

LinearLayoutManager mLinearLayoutManagerHorizontal = new LinearLayoutManager(this);

mLinearLayoutManagerHorizontal.setOrientation(LinearLayoutManager.HORIZONTAL);

mRecyclerView.setLayoutManager(mLinearLayoutManagerHorizontal);

 

animacje Material Design

circual reveal

//sdk 21

ViewAnimationUtils.createCircularReveal(textDesc, centerX, centerY, 0, radius).start();

 

ViewPager Animation

Depth Page Transformer

Zoom out Transformer

Rotation Transformer

 

<android.support.v4.view.ViewPager … />

PagerAdapter adapter = new ViewPagerAdapter(MainActivity.this, mImageId);   //ViewPagerAdapter extends PagerAdapter

mViewPager.setAdapter(adapter);

mViewPager.setPageTransformer(true, new ZoomOut());  //new DepthPage(), new Rotation() 

//ZoomOut implements ViewPager.PagerTransformer

niedziela, 20 grudnia 2015

AngularConnect 2015 - cz.2

Zapiski z reszty tegorocznego AngularConnect. Tematyka nieco bardziej wysublimowana. Godne uwagi są animacje czy Ionic2, ale największymi przebojami są IMHO: nowy rounting!, web workery! (mega pokłon), tematyka modułów, koncepcje upraszczające pewne zagadnienia w A2 (np. dowolny szablon dla komponentu listy), narzędzia w postaci wtyczki Batarangle, obsługa klawiatury i focusa, binding do asynchronicznie zwracanych wartości (choć skądś już to znam), przetwarzanie szablonów.

 

ngAnimate 2.0

image

image

image

image

image

manipulacja na CSS-ach

image

image

image

image

image

image

image

image

image

image

image

image

image

 

Angular 2 Data Flow

RxJS

image

image

ES 2016

image

image

image

Angular 2 http –> Observable

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

 

Creating User Interface Component APIs in Angular and Web Components

CustomElement

image

image

image

image

bezpośrednie odwołanie się do instancji komponentu o nazwie main

image

image

image

image

image

 

Iterative version upgrade strategies for large Angular applications

zmiana routera bez zmiany kodu w aplikacji

image

image

ogólnie jednak prezentację można ją sobie opuścić

 

Building the Best Components

image

to mi się podoba, coś na wzór hm… jednej z form bindingu z XAML

image

image

image

image

image

image

image

image

jestem na tak, bardzo rozsądna propozycja do obsługi konkretnych klawiszy

image

image

image

image

A2: możliwy fake dla całego komponentu

image

image

image

image

 

Building cross-platform apps with Ionic 2

image

image

czemu nikt nawet nie rozważa platformy Windows?

image

image

image

image

jeden HTML, jeden kod

image

ikony automatycznie dopasowane do systemu operacyjnego np. global

image

image

image

zmiany w nawigacji popieram - jak coś ma lepiej udawać aplikację natywną, niech ma bardziej natywną nawigację.

image

image

kolejne wystąpienie, na którym mówi się, że dotychczas stosowane animacje CSS były niewystarczające

image

fakt, web animacje mają być na to remedium (z drugiej strony jakoś nie wspomniano o nich przy wystąpieniu o ng-animate 2)

image

image

image

image

image

image

image

 

Routing in Eleven Dimensions with Component Router

Każda prezentacja powinna być taka jak ta. Jasna, same konkrety.

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

<router-outlet> podobny do Frame w WPF, może być ich wiele, w tym zagnieżdżonych

image

obsługa zagnieżdżeń routingów

image

image

image

image

image

image

image

z poziomu Email-a  wystarczy relatywny link

image

image

image

image

image

image

image

image

wszystkie routingi są pełnoprawne

image

image

 

Modern authentication solutions with OAuth 2.0, OpenId Connect and AngularJS

image

 

These are not the models you’re looking for

image

w sumie można sobie odpuścić

 

TypeScript tooling for greater productivity

image

Gulp & TypeScript

 

Cutting Angular's Crosscuts

image

image

image

aspect.js

angular-iop

 

Modularity and packaging for Angular2 applications

Bardzo dobra i potrzebna prezentacja. Eh, mimo nowego standardu web, znowu jest bałagan, ale może tylko przejściowo.

image

image

przeglądarki jeszcze nie rozumieją

from string (file name, url)

image

image

AMD odeszło

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

 

Using Web Workers for more responsive apps

Koniecznie warto obejrzeć.

co może przekroczyć 8ms i negatywnie wpłynąć na responsywność / płynność interfejsu użytkownika?

image

zawsze powtarzam, że tradycyjny jednowątkowy web w przeglądarce nie może być tak dobry jak inne wielowątkowe rozwiązania

image

image

pkt. nr.2 przydatny do klasycznych aplikacji desktopowych pisanych w technologiach Web (np. Electron)

przerzucanie przetwarzania na serwer nie opłaca się

image

image

image

image

Angular wszystko upraszcza

image

image

image

image

image

image

płynne przewijanie dużej ilości wierszy w przeglądarce !

image

image

image

image

image

image

image

image

image

bit.ly/web_worker_starter_pack

image

 

Better concepts, less code in Angular 2

Kolejna prezentacja, którą warto obejrzeć.

odpowiednik transkluzji

image

różna ilość i kolejność zakładek w zależności od wybranej

image

image

image

image

image

takiej jak poniższa koncepcja nie ma w 1.x

image

Lista z podmienialnym szablonem, coś jak w item controls w XAML przy czym forma nieco inna

image

image

image

wyszukiwanie z opóźnieniem

image

image

image

image

image

image

 

Debugging Angular 2 Apps with Batarangle

image

image

image

image

image

image

https://github.com/rangle/batarangle

http://rangle.io/batarangle