mirror of https://github.com/JoshKarpel/spiel
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
791 lines
46 KiB
HTML
791 lines
46 KiB
HTML
|
|
<!doctype html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
|
|
|
|
<link rel="canonical" href="https://www.spiel.how/transitions/">
|
|
|
|
|
|
<link rel="prev" href="../slides/">
|
|
|
|
|
|
<link rel="next" href="../api/">
|
|
|
|
|
|
<link rel="icon" href="../assets/favicon.png">
|
|
<meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.4.4">
|
|
|
|
|
|
|
|
<title>Slide Transitions - Spiel</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/stylesheets/main.bd3936ea.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/stylesheets/palette.356b1318.min.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
|
|
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/_mkdocstrings.css">
|
|
|
|
<link rel="stylesheet" href="../assets/style.css">
|
|
|
|
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
|
|
|
|
|
|
|
|
<script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
|
|
|
|
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
|
|
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
|
|
<label class="md-overlay" for="__drawer"></label>
|
|
<div data-md-component="skip">
|
|
|
|
|
|
<a href="#slide-transitions" class="md-skip">
|
|
Skip to content
|
|
</a>
|
|
|
|
</div>
|
|
<div data-md-component="announce">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<header class="md-header md-header--shadow" data-md-component="header">
|
|
<nav class="md-header__inner md-grid" aria-label="Header">
|
|
<a href=".." title="Spiel" class="md-header__button md-logo" aria-label="Spiel" data-md-component="logo">
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M192 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm-8 384V352h16v128c0 17.7 14.3 32 32 32s32-14.3 32-32V192h136c17.7 0 32-14.3 32-32s-14.3-32-32-32h-16V64h192v192H384v-32h-64v48c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v80H177.1c-33.7 0-64.9 17.7-82.3 46.6l-58.3 97c-9.1 15.1-4.2 34.8 10.9 43.9s34.8 4.2 43.9-10.9l28.7-47.7V480c0 17.7 14.3 32 32 32s32-14.3 32-32z"/></svg>
|
|
|
|
</a>
|
|
<label class="md-header__button md-icon" for="__drawer">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
|
|
</label>
|
|
<div class="md-header__title" data-md-component="header-title">
|
|
<div class="md-header__ellipsis">
|
|
<div class="md-header__topic">
|
|
<span class="md-ellipsis">
|
|
Spiel
|
|
</span>
|
|
</div>
|
|
<div class="md-header__topic" data-md-component="header-topic">
|
|
<span class="md-ellipsis">
|
|
|
|
Slide Transitions
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<form class="md-header__option" data-md-component="palette">
|
|
|
|
|
|
|
|
|
|
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
|
|
|
|
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
|
|
</label>
|
|
|
|
|
|
|
|
|
|
|
|
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_2">
|
|
|
|
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12c0-2.42-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
|
|
</label>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<label class="md-header__button md-icon" for="__search">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
|
|
</label>
|
|
<div class="md-search" data-md-component="search" role="dialog">
|
|
<label class="md-search__overlay" for="__search"></label>
|
|
<div class="md-search__inner" role="search">
|
|
<form class="md-search__form" name="search">
|
|
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
|
|
<label class="md-search__icon md-icon" for="__search">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
|
|
</label>
|
|
<nav class="md-search__options" aria-label="Search">
|
|
|
|
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
|
|
</button>
|
|
</nav>
|
|
|
|
</form>
|
|
<div class="md-search__output">
|
|
<div class="md-search__scrollwrap" data-md-scrollfix>
|
|
<div class="md-search-result" data-md-component="search-result">
|
|
<div class="md-search-result__meta">
|
|
Initializing search
|
|
</div>
|
|
<ol class="md-search-result__list" role="presentation"></ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-header__source">
|
|
<a href="https://github.com/JoshKarpel/spiel" title="Go to repository" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
|
</div>
|
|
<div class="md-source__repository">
|
|
GitHub
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<div class="md-container" data-md-component="container">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<main class="md-main" data-md-component="main">
|
|
<div class="md-main__inner md-grid">
|
|
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
|
|
|
|
|
|
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
|
<label class="md-nav__title" for="__drawer">
|
|
<a href=".." title="Spiel" class="md-nav__button md-logo" aria-label="Spiel" data-md-component="logo">
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M192 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm-8 384V352h16v128c0 17.7 14.3 32 32 32s32-14.3 32-32V192h136c17.7 0 32-14.3 32-32s-14.3-32-32-32h-16V64h192v192H384v-32h-64v48c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v80H177.1c-33.7 0-64.9 17.7-82.3 46.6l-58.3 97c-9.1 15.1-4.2 34.8 10.9 43.9s34.8 4.2 43.9-10.9l28.7-47.7V480c0 17.7 14.3 32 32 32s32-14.3 32-32z"/></svg>
|
|
|
|
</a>
|
|
Spiel
|
|
</label>
|
|
|
|
<div class="md-nav__source">
|
|
<a href="https://github.com/JoshKarpel/spiel" title="Go to repository" class="md-source" data-md-component="source">
|
|
<div class="md-source__icon md-icon">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
|
</div>
|
|
<div class="md-source__repository">
|
|
GitHub
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href=".." class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Introduction
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../quickstart/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Quick Start
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../presenting/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Presenting Decks
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../slides/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Making Slides
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item md-nav__item--active">
|
|
|
|
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Slide Transitions
|
|
</span>
|
|
|
|
|
|
<span class="md-nav__icon md-icon"></span>
|
|
</label>
|
|
|
|
<a href="./" class="md-nav__link md-nav__link--active">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Slide Transitions
|
|
</span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="__toc">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Table of contents
|
|
</label>
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#setting-transitions" class="md-nav__link">
|
|
Setting Transitions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#disabling-transitions" class="md-nav__link">
|
|
Disabling Transitions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#writing-custom-transitions" class="md-nav__link">
|
|
Writing Custom Transitions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../api/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
API Reference
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../gallery/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Gallery
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../contributing/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Contributing Guide
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="md-nav__item">
|
|
<a href="../changelog/" class="md-nav__link">
|
|
|
|
|
|
<span class="md-ellipsis">
|
|
Changelog
|
|
</span>
|
|
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
|
|
<div class="md-sidebar__scrollwrap">
|
|
<div class="md-sidebar__inner">
|
|
|
|
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="md-nav__title" for="__toc">
|
|
<span class="md-nav__icon md-icon"></span>
|
|
Table of contents
|
|
</label>
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#setting-transitions" class="md-nav__link">
|
|
Setting Transitions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#disabling-transitions" class="md-nav__link">
|
|
Disabling Transitions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="md-nav__item">
|
|
<a href="#writing-custom-transitions" class="md-nav__link">
|
|
Writing Custom Transitions
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="md-content" data-md-component="content">
|
|
<article class="md-content__inner md-typeset">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h1 id="slide-transitions">Slide Transitions</h1>
|
|
<div class="admonition warning">
|
|
<p class="admonition-title">Under construction!</p>
|
|
<p>Transitions are a new and experiment feature in Spiel
|
|
and the interface might change dramatically from version to version.
|
|
If you plan on using transitions, we recommend pinning the
|
|
exact version of Spiel your presentation was developed in to ensure stability.</p>
|
|
</div>
|
|
<h2 id="setting-transitions">Setting Transitions</h2>
|
|
<p>To set the default transition for the entire deck,
|
|
which will be used if a slide does not override it,
|
|
set <a class="autorefs autorefs-internal" href="../api/#spiel.Deck.default_transition"><code>Deck.default_transition</code></a> to
|
|
a <strong>type</strong> that implements the <a class="autorefs autorefs-internal" href="../api/#spiel.Transition"><code>Transition</code></a>
|
|
protocol.</p>
|
|
<p>For example, the default transition is <a class="autorefs autorefs-internal" href="../api/#spiel.Swipe"><code>Swipe</code></a>,
|
|
so not passing <code>default_transition</code> at all is equivalent to</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kn">from</span> <span class="nn">spiel</span> <span class="kn">import</span> <span class="n">Deck</span><span class="p">,</span> <span class="n">Swipe</span>
|
|
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a>
|
|
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="n">deck</span> <span class="o">=</span> <span class="n">Deck</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="sa">f</span><span class="s2">"Spiel Demo Deck"</span><span class="p">,</span> <span class="n">default_transition</span><span class="o">=</span><span class="n">Swipe</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>To override the deck-wide default for an individual slide,
|
|
specify the transition type in the <a class="autorefs autorefs-internal" href="../api/#spiel.Deck.slide"><code>@slide</code></a> decorator:</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="kn">from</span> <span class="nn">spiel</span> <span class="kn">import</span> <span class="n">Deck</span><span class="p">,</span> <span class="n">Swipe</span>
|
|
<a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a>
|
|
<a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a><span class="n">deck</span> <span class="o">=</span> <span class="n">Deck</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="sa">f</span><span class="s2">"Spiel Demo Deck"</span><span class="p">)</span>
|
|
<a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a>
|
|
<a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="nd">@deck</span><span class="o">.</span><span class="n">slide</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">"My Title"</span><span class="p">,</span> <span class="n">transition</span><span class="o">=</span><span class="n">Swipe</span><span class="p">)</span>
|
|
<a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a><span class="k">def</span> <span class="nf">slide</span><span class="p">():</span>
|
|
<a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a> <span class="o">...</span>
|
|
</code></pre></div>
|
|
<p>Or, in the arguments to <a class="autorefs autorefs-internal" href="../api/#spiel.Slide"><code>Slide</code></a>:</p>
|
|
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="kn">from</span> <span class="nn">spiel</span> <span class="kn">import</span> <span class="n">Slide</span><span class="p">,</span> <span class="n">Swipe</span>
|
|
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a>
|
|
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="n">slide</span> <span class="o">=</span> <span class="n">Slide</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">"My Title"</span><span class="p">,</span> <span class="n">transition</span><span class="o">=</span><span class="n">Swipe</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>In either case, the specified transition will be used when
|
|
transitioning <strong>to</strong> that slide.
|
|
It does not matter whether the slide is the "next" or "previous"
|
|
slide: the slide being moved to determines which transition
|
|
effect will be used.</p>
|
|
<h2 id="disabling-transitions">Disabling Transitions</h2>
|
|
<p>In any of the above examples, you can also set <code>default_transition</code>/<code>transition</code> to <code>None</code>.
|
|
In that case, there will be no transition effect when moving to the slide;
|
|
it will just be displayed on the next render, already in-place.</p>
|
|
<h2 id="writing-custom-transitions">Writing Custom Transitions</h2>
|
|
<p>To implement your own custom transition, you must write a class which implements
|
|
the <a class="autorefs autorefs-internal" href="../api/#spiel.Transition"><code>Transition</code></a> <a href="https://docs.python.org/3/library/typing.html#typing.Protocol">protocol</a>.</p>
|
|
<p>The protocol is:</p>
|
|
<div class="highlight"><span class="filename">Transition Protocol</span><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="kn">from</span> <span class="nn">__future__</span> <span class="kn">import</span> <span class="n">annotations</span>
|
|
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a>
|
|
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="kn">from</span> <span class="nn">enum</span> <span class="kn">import</span> <span class="n">Enum</span>
|
|
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="kn">from</span> <span class="nn">typing</span> <span class="kn">import</span> <span class="n">Protocol</span><span class="p">,</span> <span class="n">runtime_checkable</span>
|
|
<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a>
|
|
<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="kn">from</span> <span class="nn">textual.widget</span> <span class="kn">import</span> <span class="n">Widget</span>
|
|
<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a>
|
|
<a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a>
|
|
<a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a><span class="k">class</span> <span class="nc">Direction</span><span class="p">(</span><span class="n">Enum</span><span class="p">):</span>
|
|
<a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a><span class="w"> </span><span class="sd">"""</span>
|
|
<a id="__codelineno-3-11" name="__codelineno-3-11" href="#__codelineno-3-11"></a><span class="sd"> An enumeration that describes which direction a slide transition</span>
|
|
<a id="__codelineno-3-12" name="__codelineno-3-12" href="#__codelineno-3-12"></a><span class="sd"> animation should move in: whether we're going to the next slide,</span>
|
|
<a id="__codelineno-3-13" name="__codelineno-3-13" href="#__codelineno-3-13"></a><span class="sd"> or to the previous slide.</span>
|
|
<a id="__codelineno-3-14" name="__codelineno-3-14" href="#__codelineno-3-14"></a><span class="sd"> """</span>
|
|
<a id="__codelineno-3-15" name="__codelineno-3-15" href="#__codelineno-3-15"></a>
|
|
<a id="__codelineno-3-16" name="__codelineno-3-16" href="#__codelineno-3-16"></a> <span class="n">Next</span> <span class="o">=</span> <span class="s2">"next"</span>
|
|
<a id="__codelineno-3-17" name="__codelineno-3-17" href="#__codelineno-3-17"></a><span class="w"> </span><span class="sd">"""Indicates that the transition should handle going to the next slide."""</span>
|
|
<a id="__codelineno-3-18" name="__codelineno-3-18" href="#__codelineno-3-18"></a>
|
|
<a id="__codelineno-3-19" name="__codelineno-3-19" href="#__codelineno-3-19"></a> <span class="n">Previous</span> <span class="o">=</span> <span class="s2">"previous"</span>
|
|
<a id="__codelineno-3-20" name="__codelineno-3-20" href="#__codelineno-3-20"></a><span class="w"> </span><span class="sd">"""Indicates that the transition should handle going to the previous slide."""</span>
|
|
<a id="__codelineno-3-21" name="__codelineno-3-21" href="#__codelineno-3-21"></a>
|
|
<a id="__codelineno-3-22" name="__codelineno-3-22" href="#__codelineno-3-22"></a>
|
|
<a id="__codelineno-3-23" name="__codelineno-3-23" href="#__codelineno-3-23"></a><span class="nd">@runtime_checkable</span>
|
|
<a id="__codelineno-3-24" name="__codelineno-3-24" href="#__codelineno-3-24"></a><span class="k">class</span> <span class="nc">Transition</span><span class="p">(</span><span class="n">Protocol</span><span class="p">):</span>
|
|
<a id="__codelineno-3-25" name="__codelineno-3-25" href="#__codelineno-3-25"></a><span class="w"> </span><span class="sd">"""</span>
|
|
<a id="__codelineno-3-26" name="__codelineno-3-26" href="#__codelineno-3-26"></a><span class="sd"> A protocol that describes how to implement a transition animation.</span>
|
|
<a id="__codelineno-3-27" name="__codelineno-3-27" href="#__codelineno-3-27"></a>
|
|
<a id="__codelineno-3-28" name="__codelineno-3-28" href="#__codelineno-3-28"></a><span class="sd"> See [Writing Custom Transitions](./transitions.md#writing-custom-transitions)</span>
|
|
<a id="__codelineno-3-29" name="__codelineno-3-29" href="#__codelineno-3-29"></a><span class="sd"> for more details on how to implement the protocol.</span>
|
|
<a id="__codelineno-3-30" name="__codelineno-3-30" href="#__codelineno-3-30"></a><span class="sd"> """</span>
|
|
<a id="__codelineno-3-31" name="__codelineno-3-31" href="#__codelineno-3-31"></a>
|
|
<a id="__codelineno-3-32" name="__codelineno-3-32" href="#__codelineno-3-32"></a> <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span>
|
|
<a id="__codelineno-3-33" name="__codelineno-3-33" href="#__codelineno-3-33"></a> <span class="bp">self</span><span class="p">,</span>
|
|
<a id="__codelineno-3-34" name="__codelineno-3-34" href="#__codelineno-3-34"></a> <span class="n">from_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-3-35" name="__codelineno-3-35" href="#__codelineno-3-35"></a> <span class="n">to_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-3-36" name="__codelineno-3-36" href="#__codelineno-3-36"></a> <span class="n">direction</span><span class="p">:</span> <span class="n">Direction</span><span class="p">,</span>
|
|
<a id="__codelineno-3-37" name="__codelineno-3-37" href="#__codelineno-3-37"></a> <span class="p">)</span> <span class="o">-></span> <span class="kc">None</span><span class="p">:</span>
|
|
<a id="__codelineno-3-38" name="__codelineno-3-38" href="#__codelineno-3-38"></a><span class="w"> </span><span class="sd">"""</span>
|
|
<a id="__codelineno-3-39" name="__codelineno-3-39" href="#__codelineno-3-39"></a><span class="sd"> A hook function to set up any CSS that should be present at the start of the transition.</span>
|
|
<a id="__codelineno-3-40" name="__codelineno-3-40" href="#__codelineno-3-40"></a>
|
|
<a id="__codelineno-3-41" name="__codelineno-3-41" href="#__codelineno-3-41"></a><span class="sd"> Args:</span>
|
|
<a id="__codelineno-3-42" name="__codelineno-3-42" href="#__codelineno-3-42"></a><span class="sd"> from_widget: The widget showing the slide that we are leaving.</span>
|
|
<a id="__codelineno-3-43" name="__codelineno-3-43" href="#__codelineno-3-43"></a><span class="sd"> to_widget: The widget showing the slide that we are entering.</span>
|
|
<a id="__codelineno-3-44" name="__codelineno-3-44" href="#__codelineno-3-44"></a><span class="sd"> direction: The desired direction of the transition animation.</span>
|
|
<a id="__codelineno-3-45" name="__codelineno-3-45" href="#__codelineno-3-45"></a><span class="sd"> """</span>
|
|
<a id="__codelineno-3-46" name="__codelineno-3-46" href="#__codelineno-3-46"></a> <span class="o">...</span>
|
|
<a id="__codelineno-3-47" name="__codelineno-3-47" href="#__codelineno-3-47"></a>
|
|
<a id="__codelineno-3-48" name="__codelineno-3-48" href="#__codelineno-3-48"></a> <span class="k">def</span> <span class="nf">progress</span><span class="p">(</span>
|
|
<a id="__codelineno-3-49" name="__codelineno-3-49" href="#__codelineno-3-49"></a> <span class="bp">self</span><span class="p">,</span>
|
|
<a id="__codelineno-3-50" name="__codelineno-3-50" href="#__codelineno-3-50"></a> <span class="n">from_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-3-51" name="__codelineno-3-51" href="#__codelineno-3-51"></a> <span class="n">to_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-3-52" name="__codelineno-3-52" href="#__codelineno-3-52"></a> <span class="n">direction</span><span class="p">:</span> <span class="n">Direction</span><span class="p">,</span>
|
|
<a id="__codelineno-3-53" name="__codelineno-3-53" href="#__codelineno-3-53"></a> <span class="n">progress</span><span class="p">:</span> <span class="nb">float</span><span class="p">,</span>
|
|
<a id="__codelineno-3-54" name="__codelineno-3-54" href="#__codelineno-3-54"></a> <span class="p">)</span> <span class="o">-></span> <span class="kc">None</span><span class="p">:</span>
|
|
<a id="__codelineno-3-55" name="__codelineno-3-55" href="#__codelineno-3-55"></a><span class="w"> </span><span class="sd">"""</span>
|
|
<a id="__codelineno-3-56" name="__codelineno-3-56" href="#__codelineno-3-56"></a><span class="sd"> A hook function that is called each time the `progress`</span>
|
|
<a id="__codelineno-3-57" name="__codelineno-3-57" href="#__codelineno-3-57"></a><span class="sd"> of the transition animation updates.</span>
|
|
<a id="__codelineno-3-58" name="__codelineno-3-58" href="#__codelineno-3-58"></a>
|
|
<a id="__codelineno-3-59" name="__codelineno-3-59" href="#__codelineno-3-59"></a><span class="sd"> Args:</span>
|
|
<a id="__codelineno-3-60" name="__codelineno-3-60" href="#__codelineno-3-60"></a><span class="sd"> from_widget: The widget showing the slide that we are leaving.</span>
|
|
<a id="__codelineno-3-61" name="__codelineno-3-61" href="#__codelineno-3-61"></a><span class="sd"> to_widget: The widget showing the slide that we are entering.</span>
|
|
<a id="__codelineno-3-62" name="__codelineno-3-62" href="#__codelineno-3-62"></a><span class="sd"> direction: The desired direction of the transition animation.</span>
|
|
<a id="__codelineno-3-63" name="__codelineno-3-63" href="#__codelineno-3-63"></a><span class="sd"> progress: The progress of the animation, as a percentage</span>
|
|
<a id="__codelineno-3-64" name="__codelineno-3-64" href="#__codelineno-3-64"></a><span class="sd"> (e.g., initial state is `0`, final state is `100`).</span>
|
|
<a id="__codelineno-3-65" name="__codelineno-3-65" href="#__codelineno-3-65"></a><span class="sd"> Note that this is **not necessarily** bounded between `0` and `100`,</span>
|
|
<a id="__codelineno-3-66" name="__codelineno-3-66" href="#__codelineno-3-66"></a><span class="sd"> nor is it necessarily [monotonically increasing](https://en.wikipedia.org/wiki/Monotonic_function),</span>
|
|
<a id="__codelineno-3-67" name="__codelineno-3-67" href="#__codelineno-3-67"></a><span class="sd"> depending on the underlying Textual animation easing function,</span>
|
|
<a id="__codelineno-3-68" name="__codelineno-3-68" href="#__codelineno-3-68"></a><span class="sd"> which may overshoot or bounce.</span>
|
|
<a id="__codelineno-3-69" name="__codelineno-3-69" href="#__codelineno-3-69"></a><span class="sd"> However, it will always start at `0` and end at `100`,</span>
|
|
<a id="__codelineno-3-70" name="__codelineno-3-70" href="#__codelineno-3-70"></a><span class="sd"> no matter which `direction` the transition should move in.</span>
|
|
<a id="__codelineno-3-71" name="__codelineno-3-71" href="#__codelineno-3-71"></a><span class="sd"> """</span>
|
|
<a id="__codelineno-3-72" name="__codelineno-3-72" href="#__codelineno-3-72"></a> <span class="o">...</span>
|
|
</code></pre></div>
|
|
<p>As an example, consider the <a class="autorefs autorefs-internal" href="../api/#spiel.Swipe"><code>Swipe</code></a> transition included in Spiel:</p>
|
|
<div class="highlight"><span class="filename">Swipe Transition</span><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="kn">from</span> <span class="nn">__future__</span> <span class="kn">import</span> <span class="n">annotations</span>
|
|
<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a>
|
|
<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a><span class="kn">from</span> <span class="nn">textual.widget</span> <span class="kn">import</span> <span class="n">Widget</span>
|
|
<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a>
|
|
<a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a><span class="kn">from</span> <span class="nn">spiel.transitions.protocol</span> <span class="kn">import</span> <span class="n">Direction</span><span class="p">,</span> <span class="n">Transition</span>
|
|
<a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a>
|
|
<a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a>
|
|
<a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a><span class="k">class</span> <span class="nc">Swipe</span><span class="p">(</span><span class="n">Transition</span><span class="p">):</span>
|
|
<a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a><span class="w"> </span><span class="sd">"""</span>
|
|
<a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a><span class="sd"> A transition where the current and incoming slide are placed side-by-side</span>
|
|
<a id="__codelineno-4-11" name="__codelineno-4-11" href="#__codelineno-4-11"></a><span class="sd"> and gradually slide across the screen,</span>
|
|
<a id="__codelineno-4-12" name="__codelineno-4-12" href="#__codelineno-4-12"></a><span class="sd"> with the current slide leaving and the incoming slide entering.</span>
|
|
<a id="__codelineno-4-13" name="__codelineno-4-13" href="#__codelineno-4-13"></a><span class="sd"> """</span>
|
|
<a id="__codelineno-4-14" name="__codelineno-4-14" href="#__codelineno-4-14"></a>
|
|
<a id="__codelineno-4-15" name="__codelineno-4-15" href="#__codelineno-4-15"></a> <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span>
|
|
<a id="__codelineno-4-16" name="__codelineno-4-16" href="#__codelineno-4-16"></a> <span class="bp">self</span><span class="p">,</span>
|
|
<a id="__codelineno-4-17" name="__codelineno-4-17" href="#__codelineno-4-17"></a> <span class="n">from_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-4-18" name="__codelineno-4-18" href="#__codelineno-4-18"></a> <span class="n">to_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-4-19" name="__codelineno-4-19" href="#__codelineno-4-19"></a> <span class="n">direction</span><span class="p">:</span> <span class="n">Direction</span><span class="p">,</span>
|
|
<a id="__codelineno-4-20" name="__codelineno-4-20" href="#__codelineno-4-20"></a> <span class="p">)</span> <span class="o">-></span> <span class="kc">None</span><span class="p">:</span>
|
|
<a id="__codelineno-4-21" name="__codelineno-4-21" href="#__codelineno-4-21"></a> <span class="k">match</span> <span class="n">direction</span><span class="p">:</span>
|
|
<a id="__codelineno-4-22" name="__codelineno-4-22" href="#__codelineno-4-22"></a> <span class="k">case</span> <span class="n">Direction</span><span class="o">.</span><span class="n">Next</span><span class="p">:</span>
|
|
<a id="__codelineno-4-23" name="__codelineno-4-23" href="#__codelineno-4-23"></a> <span class="n">to_widget</span><span class="o">.</span><span class="n">styles</span><span class="o">.</span><span class="n">offset</span> <span class="o">=</span> <span class="p">(</span><span class="s2">"100%"</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
|
|
<a id="__codelineno-4-24" name="__codelineno-4-24" href="#__codelineno-4-24"></a> <span class="k">case</span> <span class="n">Direction</span><span class="o">.</span><span class="n">Previous</span><span class="p">:</span>
|
|
<a id="__codelineno-4-25" name="__codelineno-4-25" href="#__codelineno-4-25"></a> <span class="n">to_widget</span><span class="o">.</span><span class="n">styles</span><span class="o">.</span><span class="n">offset</span> <span class="o">=</span> <span class="p">(</span><span class="s2">"-100%"</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
|
|
<a id="__codelineno-4-26" name="__codelineno-4-26" href="#__codelineno-4-26"></a>
|
|
<a id="__codelineno-4-27" name="__codelineno-4-27" href="#__codelineno-4-27"></a> <span class="k">def</span> <span class="nf">progress</span><span class="p">(</span>
|
|
<a id="__codelineno-4-28" name="__codelineno-4-28" href="#__codelineno-4-28"></a> <span class="bp">self</span><span class="p">,</span>
|
|
<a id="__codelineno-4-29" name="__codelineno-4-29" href="#__codelineno-4-29"></a> <span class="n">from_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-4-30" name="__codelineno-4-30" href="#__codelineno-4-30"></a> <span class="n">to_widget</span><span class="p">:</span> <span class="n">Widget</span><span class="p">,</span>
|
|
<a id="__codelineno-4-31" name="__codelineno-4-31" href="#__codelineno-4-31"></a> <span class="n">direction</span><span class="p">:</span> <span class="n">Direction</span><span class="p">,</span>
|
|
<a id="__codelineno-4-32" name="__codelineno-4-32" href="#__codelineno-4-32"></a> <span class="n">progress</span><span class="p">:</span> <span class="nb">float</span><span class="p">,</span>
|
|
<a id="__codelineno-4-33" name="__codelineno-4-33" href="#__codelineno-4-33"></a> <span class="p">)</span> <span class="o">-></span> <span class="kc">None</span><span class="p">:</span>
|
|
<a id="__codelineno-4-34" name="__codelineno-4-34" href="#__codelineno-4-34"></a> <span class="k">match</span> <span class="n">direction</span><span class="p">:</span>
|
|
<a id="__codelineno-4-35" name="__codelineno-4-35" href="#__codelineno-4-35"></a> <span class="k">case</span> <span class="n">Direction</span><span class="o">.</span><span class="n">Next</span><span class="p">:</span>
|
|
<a id="__codelineno-4-36" name="__codelineno-4-36" href="#__codelineno-4-36"></a> <span class="n">from_widget</span><span class="o">.</span><span class="n">styles</span><span class="o">.</span><span class="n">offset</span> <span class="o">=</span> <span class="p">(</span><span class="sa">f</span><span class="s2">"-</span><span class="si">{</span><span class="n">progress</span><span class="si">:</span><span class="s2">.2f</span><span class="si">}</span><span class="s2">%"</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
|
|
<a id="__codelineno-4-37" name="__codelineno-4-37" href="#__codelineno-4-37"></a> <span class="n">to_widget</span><span class="o">.</span><span class="n">styles</span><span class="o">.</span><span class="n">offset</span> <span class="o">=</span> <span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="mi">100</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="n">progress</span><span class="si">:</span><span class="s2">.2f</span><span class="si">}</span><span class="s2">%"</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
|
|
<a id="__codelineno-4-38" name="__codelineno-4-38" href="#__codelineno-4-38"></a> <span class="k">case</span> <span class="n">Direction</span><span class="o">.</span><span class="n">Previous</span><span class="p">:</span>
|
|
<a id="__codelineno-4-39" name="__codelineno-4-39" href="#__codelineno-4-39"></a> <span class="n">from_widget</span><span class="o">.</span><span class="n">styles</span><span class="o">.</span><span class="n">offset</span> <span class="o">=</span> <span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="n">progress</span><span class="si">:</span><span class="s2">.2f</span><span class="si">}</span><span class="s2">%"</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
|
|
<a id="__codelineno-4-40" name="__codelineno-4-40" href="#__codelineno-4-40"></a> <span class="n">to_widget</span><span class="o">.</span><span class="n">styles</span><span class="o">.</span><span class="n">offset</span> <span class="o">=</span> <span class="p">(</span><span class="sa">f</span><span class="s2">"-</span><span class="si">{</span><span class="mi">100</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="n">progress</span><span class="si">:</span><span class="s2">.2f</span><span class="si">}</span><span class="s2">%"</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
|
|
</code></pre></div>
|
|
<p>The transition effect is implemented using
|
|
<a href="https://textual.textualize.io/styles/">Textual CSS styles</a>
|
|
on the <a href="https://textual.textualize.io/guide/widgets/">widgets</a>
|
|
that represent the "from" and "to" widgets.</p>
|
|
<p>Because the slide widgets are on <a href="https://textual.textualize.io/styles/layers/">different layers</a>,
|
|
they would normally both try to render in the "upper left corner" of the screen,
|
|
and since the <code>from</code> slide is on the upper layer, it would be the one that actually gets rendered.</p>
|
|
<p>In <code>Swipe.initialize</code>, the <code>to</code> widget is moved to either the left or the right
|
|
(depending on the transition direction) by <code>100%</code>, i.e., it's own width.
|
|
This puts the slides side-by-side, with the <code>to</code> slide fully off-screen.</p>
|
|
<p>As the transition progresses, the horizontal offsets of the two widgets are adjusted in lockstep
|
|
so that they appear to move across the screen.
|
|
Again, the direction of offset adjustment depends on the transition direction.
|
|
The absolute value of the horizontal offsets always sums to <code>100%</code>, which keeps the slides glued together
|
|
as they move across the screen.</p>
|
|
<p>When <code>progress=100</code> in the final state, the <code>to</code> widget will be at zero horizontal offset,
|
|
and the <code>from</code> widget will be at plus or minus <code>100%</code>, fully moved off-screen.</p>
|
|
<div class="admonition tip">
|
|
<p class="admonition-title">Contribute your transitions!</p>
|
|
<p>If you have developed a cool transition, consider <a href="../contributing/">contributing it to Spiel</a>!</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer class="md-footer">
|
|
|
|
<div class="md-footer-meta md-typeset">
|
|
<div class="md-footer-meta__inner md-grid">
|
|
<div class="md-copyright">
|
|
|
|
|
|
Made with
|
|
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
|
|
Material for MkDocs
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="md-social">
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/JoshKarpel/spiel" target="_blank" rel="noopener" title="Spiel on GitHub" class="md-social__link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<div class="md-dialog" data-md-component="dialog">
|
|
<div class="md-dialog__inner md-typeset"></div>
|
|
</div>
|
|
|
|
|
|
<script id="__config" type="application/json">{"base": "..", "features": ["navigation.instant", "navigation.tracking", "navigation.sections", "navigation.indexes", "toc.follow", "content.code.annotate", "content.code.copy"], "search": "../assets/javascripts/workers/search.f886a092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
|
|
|
|
|
|
<script src="../assets/javascripts/bundle.94c44541.min.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |