Python>Plotly:フレーム間を補間するアニメーションを除去する方法


# <a id ="1">1.概要</a>
Plotlyで時間経過をグラフ化すると自動的にフレーム間を補完するアニメーションが入ります。 
それをなくす方法を調べました。


# <a id ="2">2.デフォルトのグラフ(フレーム間のアニメーションあり)</a>

以下のサイトのコードをベースに考えます。

https://plotly.com/python/animations/

通常設定では以下のようにフレーム間を補間するアニメーションがついています。

```python:input
import plotly.express as px
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])
fig.show()

```
![02_01_default_duration500_.html-個人-Microsoft_-Edge-2022-02-16-23-53-11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/61a4e323-19c6-9b64-872d-e84d5ace0259.gif)




# <a id ="3">3.フレーム間アニメーション除去バージョンしたグラフ</a>

上で作成した`fig`の設定内容を変更することで補間アニメーションを除去できます。

## <a id ="3.1">3.1.フレームの設定の確認</a>
以下コマンドを実行するとフレームの表示処理に関する設定を確認できます。

```python:input
fig.layout.updatemenus
```

```python:output
(layout.Updatemenu({
     'buttons': [{'args': [None, {'frame': {'duration': 500, 'redraw': False},
                  'mode': 'immediate', 'fromcurrent': True, 
                  'transition':{'duration': 500, 'easing': 'linear'}}],
                  'label': '&#9654;',
                  'method': 'animate'},
                 {'args': [[None], {'frame': {'duration': 0, 'redraw': False},
                  'mode': 'immediate', 'fromcurrent': True, 
                  'transition':{'duration': 0, 'easing': 'linear'}}],
                  'label': '&#9724;',
                  'method': 'animate'}],
     'direction': 'left',
     'pad': {'r': 10, 't': 70},
     'showactive': False,
     'type': 'buttons',
     'x': 0.1,
     'xanchor': 'right',
     'y': 0,
     'yanchor': 'top'
 }),)
```

ここで4行目の`'transition':{'duration': 500, 'easing': 'linear'}}],`の500は
フレーム間の補間アニメーションで500msつかうことを示しています。　　
>参考
https://github.com/plotly/plotly.py/blob/03979d105c65dda3df3a155322eaff18f203b03f/packages/python/plotly/plotly/validators/layout/_transition.py


## <a id ="3.1">3.1.フレームの設定の変更</a>
4行目の`'transition':{'duration': 500, 'easing': 'linear'}}],`の500を0に変更することで
フレーム間の補間アニメーションをなくすことができます。

```python:input
fig.update_layout(updatemenus = [{
    'buttons': [{'args': [None, {'frame': {'duration': 500, 'redraw': False},
                                 'mode': 'immediate', 'fromcurrent': True, 
                                 'transition':{'duration': 0, 'easing': 'linear'}}],#'duration': 500-> 0
                 'label': '&#9654;',
                 'method': 'animate'},
                {'args': [[None], {'frame': {'duration': 0, 'redraw': False},
                                   'mode': 'immediate', 'fromcurrent': True, 'transition':
                                   {'duration': 0, 'easing': 'linear'}}],
                 'label': '&#9724;',
                 'method': 'animate'}],
    'direction': 'left',
    'pad': {'r': 10, 't': 70},
    'showactive': False,
    'type': 'buttons',
    'x': 0.1,
    'xanchor': 'right',
    'y': 0,
    'yanchor': 'top'
 }]) 

```
![02_01_no_animation_duration0_.html-個人-Microsoft_-Edge-2022-02-16-23-54-02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/f92b49d8-22a8-f1d3-d685-507206b4bd87.gif)


以上