Skip to content

Commit

Permalink
Created StaggeredDistanceSlide transition & used where appropriate.
Browse files Browse the repository at this point in the history
  • Loading branch information
nickbutcher committed Aug 4, 2016
1 parent f98b876 commit 0371370
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*
* Copyright 2016 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package io.plaidapp.ui.transitions;

import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.transition.TransitionValues;
import android.transition.Visibility;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

import io.plaidapp.R;

/**
* An alternative to {@link android.transition.Slide} which staggers elements by <b>distance</b>
* rather than using start delays. That is elements start from/end at a progressively increasing
* displacement such that they come together/move apart over the same duration as they enter/exit.
* This can produce more cohesive choreography. The displacement factor can be controlled by the
* {@code spread} attribute.
* <p>
* Currently only supports entering/exiting from the bottom edge.
*/
public class StaggeredDistanceSlide extends Visibility {

private static final String PROPNAME_SCREEN_LOCATION = "android:visibility:screenLocation";

private int spread = 1;

public StaggeredDistanceSlide() { }

public StaggeredDistanceSlide(Context context, AttributeSet attrs) {
super(context, attrs);
final TypedArray a =
context.obtainStyledAttributes(attrs, R.styleable.StaggeredDistanceSlide);
spread = a.getInteger(R.styleable.StaggeredDistanceSlide_spread, spread);
a.recycle();
}

public int getSpread() {
return spread;
}

public void setSpread(int spread) {
this.spread = spread;
}

@Override
public Animator onAppear(ViewGroup sceneRoot, View view,
TransitionValues startValues, TransitionValues endValues) {
int[] position = (int[]) endValues.values.get(PROPNAME_SCREEN_LOCATION);
view.setTranslationY(sceneRoot.getHeight() + (position[1] * spread));
return ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, 0f);
}

@Override
public Animator onDisappear(ViewGroup sceneRoot, View view,
TransitionValues startValues, TransitionValues endValues) {
int[] position = (int[]) endValues.values.get(PROPNAME_SCREEN_LOCATION);
return ObjectAnimator.ofFloat(view, View.TRANSLATION_Y,
sceneRoot.getHeight() + (position[1] * spread));
}
}
11 changes: 7 additions & 4 deletions app/src/main/res/transition/designer_news_story_enter.xml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:transitionOrdering="together"
android:interpolator="@android:interpolator/linear_out_slow_in">

Expand All @@ -28,10 +29,12 @@
<target android:excludeId="@id/story_toolbar" />
<target android:excludeId="@id/fab" />
</targets>
<slide
android:slideEdge="bottom"
android:startDelay="150"
android:duration="200" />
<transition
class="io.plaidapp.ui.transitions.StaggeredDistanceSlide"
app:spread="5"
android:startDelay="100"
android:duration="300"
android:interpolator="@android:interpolator/linear_out_slow_in" />
<fade
android:fadingMode="fade_in"
android:startDelay="250"
Expand Down
11 changes: 7 additions & 4 deletions app/src/main/res/transition/designer_news_story_return.xml
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,22 @@

<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:transitionOrdering="together"
android:interpolator="@android:interpolator/fast_out_linear_in">

<slide
android:slideEdge="bottom"
android:duration="200">
<transition
class="io.plaidapp.ui.transitions.StaggeredDistanceSlide"
app:spread="3"
android:duration="200"
android:interpolator="@android:interpolator/fast_out_linear_in">
<targets>
<target android:excludeId="@android:id/navigationBarBackground" />
<target android:excludeId="@android:id/statusBarBackground" />
<target android:excludeId="@id/background" />
<target android:excludeId="@id/story_toolbar" />
</targets>
</slide>
</transition>

<fade android:duration="120">
<targets>
Expand Down
13 changes: 8 additions & 5 deletions app/src/main/res/transition/dribbble_player_enter.xml
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,22 @@

<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:transitionOrdering="together"
android:interpolator="@android:interpolator/linear_out_slow_in">

<slide
android:slideEdge="bottom"
android:startDelay="100"
android:duration="300">
<transition
class="io.plaidapp.ui.transitions.StaggeredDistanceSlide"
app:spread="5"
android:startDelay="50"
android:duration="350"
android:interpolator="@android:interpolator/linear_out_slow_in">
<targets>
<target android:excludeId="@android:id/navigationBarBackground" />
<target android:excludeId="@android:id/statusBarBackground" />
<target android:excludeId="@id/background" />
</targets>
</slide>
</transition>

<fade android:duration="200">
<targets>
Expand Down
12 changes: 8 additions & 4 deletions app/src/main/res/transition/dribbble_player_return.xml
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,21 @@

<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:transitionOrdering="together"
android:interpolator="@android:interpolator/fast_out_linear_in">

<slide
android:slideEdge="bottom"
android:duration="200">
<transition
class="io.plaidapp.ui.transitions.StaggeredDistanceSlide"
app:spread="3"
android:duration="200"
android:interpolator="@android:interpolator/fast_out_linear_in">
<targets>
<target android:excludeId="@android:id/navigationBarBackground" />
<target android:excludeId="@android:id/statusBarBackground" />
<target android:excludeId="@id/background" />
</targets>
</slide>
</transition>

<fade android:duration="200">
<targets>
Expand Down
24 changes: 24 additions & 0 deletions app/src/main/res/values/attrs_staggered_distance_slide.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2016 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<resources>

<declare-styleable name="StaggeredDistanceSlide">
<attr name="spread" format="integer" />
</declare-styleable>

</resources>

0 comments on commit 0371370

Please sign in to comment.