SVG SMIL Animation

目錄[^1]

一慢蜓、SVG SMIL Animation概覽

1.1 SMIL是什么？

全稱Synchronized Multimedia Integration Language
SMIL允許你做這些事情：

  • 動畫元素的數(shù)值屬性（X告喊，Y,...）
  • 動畫屬性變換（平移或旋轉(zhuǎn)或縮放）
  • 動畫顏色變換
  • 沿著指定路徑運(yùn)動 CSS3不能做到

1.2 SMIL強(qiáng)大之處

SMIL的強(qiáng)大之處在于：不需要CSS，不需要JS派昧，只需要 animate 元素即可黔姜。實(shí)例:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="200" y="200" width="60" height="60" fill="red"></rect>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</svg>
SMIL在各大瀏覽器都支持



二、SMIL Animation元素及效果概覽

  • <set>
  • <animate>
  • <animateColor>
  • <animateTransform>
  • <animateMotion>


2.1 <set />

<set>意思是設(shè)置蒂萎，此元素沒有動畫效果秆吵。但是可以實(shí)現(xiàn)基本的延遲功能。也就是說岖是，可以在特定時(shí)間之后修改某個屬性值（也可以是CSS屬性值）帮毁。
實(shí)例：矩形會在3s后從x="160" 移動到x="60"的位置。

<svg xmlns="http://www.w3.org/2000/svg"  width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red">
        <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </rect>
</svg>


2.2 <animate />

基礎(chǔ)動畫元素豺撑。實(shí)現(xiàn)單屬性的動畫過渡效果烈疚。實(shí)例：矩形沿著X軸平移

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red">
        <animate attributeName="x" from="200" to="10" begin="0s" dur="1s" repeatCount="indefinite" />
    </rect> 
</svg>


2.3 <animateColor />

顏色動畫，其可以實(shí)現(xiàn)的功能與效果聪轿，animate也可以做到爷肝，因此，該屬性已經(jīng)被廢棄


2.4 <animateTransform></animateTransform>

實(shí)現(xiàn) transform 變換動畫效果陆错。實(shí)例灯抛，矩形快速變大：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
    <rect x="200" y="200" width="60" height="60" fill="red"></rect> 
    <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="3"></animateTransform>
</svg>


2.5 <animateMotion>

animateMotion元素可以讓SVG各種圖形沿著特定的 path 路徑運(yùn)動。實(shí)例：矩形按照既定路徑運(yùn)動

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
  <rect x="-25" y="-25" width="50" height="50" fill="rgba(0,255,255,.6)">
    <animateMotion path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" fill="freeze"></animateMotion>
  </rect>
  <path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>


2.6 自由組合

讓矩形沿著路徑來回移動音瓷，并更改顏色

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
  <circle cx="0" cy="0" r="5" fill="red"></circle>
  <circle cx="0" cy="-100" r="5" fill="yellow"></circle>
  <rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
    <animateMotion id="clockwise" path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" begin="0; counterclockwise.end + 1s" fill="freeze"></animateMotion>
    <animateMotion id="counterclockwise" path="M 0 -100 A 200 200 0 1 1 100 100 L 0 0" dur="3s" begin="clockwise.end + 1s" rotate="auto" fill="freeze"></animateMotion>
    <animate id="toYellow" attributeType="XML" attributeName="fill" 
      begin="0; toRed.end + 1s" 
      from="red" to="yellow" dur="3s" fill="freeze"></animate>
    <animate id="toRed" attributeType="XML" attributeName="fill" 
      begin="toYellow.end + 1s"
      from="yellow" to="red" dur="3s" fill="freeze"></animate>
  </rect>
  <path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>



三对嚼、SVG Animation參數(shù)詳解

3.1 attributeName = <attributeName>

需要變化的元素屬性名稱：

  • 可以是元素直接暴露的屬性，例如绳慎，對于反復(fù)出現(xiàn)的矩形對應(yīng)的 <rect> 元素上的 x纵竖， y或者rx漠烧，ry
  • 還可以是CSS屬性。例如靡砌，透明度 opacity已脓。


3.2 attributeType = "CSS | XML | auto"

attributeType支持三個固定參數(shù)，CSS通殃、XML度液、auto，用來表示attributeType屬性值的列表画舌。x,y以及transform就屬于XML堕担；opacity就屬于CSS；auto為默認(rèn)值骗炉，自動判別的意思照宝，實(shí)際上縣當(dāng)成CSS處理，如果發(fā)現(xiàn)不認(rèn)識句葵，直接XML類別處理。因此如果不確定某屬性是XML還是CSS類別的時(shí)候設(shè)置為auto兢仰。雖然如此乍丈，為了瀏覽器性能最佳，還是盡量區(qū)分類別把将。


3.3 from轻专，to，by察蹲，values

上面的4個屬性是一個家族的请垛，他們解決的問題是，從哪里來洽议？到哪里去宗收？怎么去？去干什么亚兄？

  • from = "value" ：動畫的起始值混稽。
  • to = "value" ：指定動畫的結(jié)束值。
  • by = "value" ：動畫的相對變化值审胚。
  • values = "list" ：用分號分隔的一個或多個值匈勋，可以看出是動畫的多個關(guān)鍵值點(diǎn)。

from膳叨，to洽洁，by，values雖然是一個家族的菲嘴，但是相互之間還是有制約關(guān)系的：

  • 如果動畫的起始值與元素的默認(rèn)值是一樣的饿自，form參數(shù)可以省略碎浇。

  • （不考慮values）to、by兩個參數(shù)至少需要有一個出現(xiàn)璃俗，否則沒有動畫效果奴璃。to表示絕對值，by表示相對值城豁。
    拿位移舉例苟穆，如果from="100"，to="160"則表示移動到160這個位置唱星，但是by="160"表示100+160=260雳旅，表示移動到260的位置。

  • 如果to间聊，by同時(shí)出現(xiàn)攒盈，則by打醬油，只是別to哎榴。

  • 如果to型豁，by，values都沒設(shè)置尚蝌，自然沒動畫效果迎变。如果任意（包括from）一個屬性的值不合法，嚴(yán)格來說是沒有動畫效果的飘言。但是Chrome有容錯機(jī)制衣形，可能會出現(xiàn)動畫。

  • values可以是一個或多個值姿鸿。當(dāng)values的值設(shè)置并被識別時(shí)谆吴，from，to苛预，by的值都會被忽略句狼。
    values的功能就是實(shí)現(xiàn)多點(diǎn)之間動畫。而from碟渺，to鲜锚，by只能實(shí)現(xiàn)兩個點(diǎn)的切換。實(shí)例苫拍，矩形來回移動：

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
    <rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
        <animate attributeName="fill" values="red;green;blue;black" dur="4s" fill="freeze" />
        <animate attributeName="x" values="0;300;100;500" dur="4s" fill="freeze"/>
    </rect>
 </svg>

總結(jié)為五個動畫：from-to動畫芜繁、from-by動畫、to動畫绒极、by動畫骏令、values動畫。


3.4 begin垄提，end

begin指動畫開始的時(shí)間榔袋，看上去很簡單周拐。例如begin="3s"只是最基本的表示方式。
begin的定義是分號分隔的一組值凰兑。例如begin="3s;5s"表示的是3s之后動畫走一下妥粟，5s的時(shí)候再走一下（如果之前的動畫沒走完，會立即停止并從頭開始）

SVG Animate中的時(shí)間表示

常見單位有"h" | "min" | "s" | "ms",以上單位都是英文單位的縮寫吏够。
時(shí)間值支持小數(shù)寫法勾给，因此90s也可以用1.5min表示。時(shí)間值還支持hh:mm:ss這種寫法锅知，因此播急，90s我們也可以使用01:30表示。

還有一點(diǎn)售睹，十進(jìn)制的小數(shù)值是秒的浮點(diǎn)定義桩警，什么意思呢？例如 begin="1.5" 沒有單位昌妹，這里的小數(shù)點(diǎn)表示秒捶枢，也就是 1.5s的意思。所以上面N次出現(xiàn)的begin=3s 也可以簡寫作 begin="3"捺宗。

begin的單值除了普通的value還有下面這些類別的value：

  • offset-value 表示偏移值柱蟀，數(shù)值前面有+ 或 - ，指相對于document的begin值蚜厉；

  • syncbase-value 基于同步確定的值。語法為：[ID].begin/end +/- 時(shí)間值畜眨。
    例如: 2.6綜合實(shí)例的begin="0; counterclockwise.end + 1s" 意思是上一個動畫結(jié)束1s之后昼牛。

  • event-value 這個表示與時(shí)間相關(guān)聯(lián)的值。類似于 ”點(diǎn)擊執(zhí)行該動畫“康聂， 語法為：id.event +- time
    例如：begin = "circle.click + 2s" 表示點(diǎn)擊2s之后執(zhí)行動畫

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
    <circle id="circle" cx="100" cy="100" r="20"></circle>
    <rect x="-25" y="-25" rx="5" ry="5" width="100" height="100" fill="red">
        <animate attributeName="x" to="260" begin="circle.click + 2s" dur="2s" />
    </rect>
 </svg>

需要注意的是贰健，這類與實(shí)踐關(guān)聯(lián)的SVG需要內(nèi)聯(lián)在頁面中，否則click什么的都是徒勞恬汁。

  • repeat-value 指重復(fù)多少次之后做什么伶椿。語法為：[ID].repeat（整數(shù)） +/- 時(shí)間值。
    實(shí)例：矩形水平移動兩次之后氓侧，斜向運(yùn)動
<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="100" height="100" fill="#ff5050">
        <animate id="x" attributeName="x" to="800" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="y" to="800" begin="x.repeat(2)" dur="3s" fill="freeze" />
    </rect>
</svg>

begin="x.repeat(2)"指id為x的元素的動畫重復(fù)2次之后執(zhí)行該動畫脊另。

  • accessKey-value 定義快捷鍵。即按下某個按鍵動畫開始约巷。語法為: accessKey("character"). character表示快捷鍵所在字符偎痛。
    實(shí)例：按下A鍵動畫執(zhí)行（firefox上可用，chrome不支持）
<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="100" height="100" fill="#ff5050">
        <animate attributeName="x" to="400" begin="accessKey(a)" dur="3s" repeatCount="indefinite" />
    </rect>
</svg>

  • wallclock-sync-value 指真實(shí)世界的時(shí)鐘定義独郎，時(shí)間語法是基于ISO8601中定義的語法踩麦，例如：2018-01-23T10:40:54.45+01:00

  • indefinite 就是這個字符串值枚赡，表示無限等待，需要beginElement()方法觸谓谦，或者指向該動畫元素的超鏈接（SVG中的a元素）觸發(fā)贫橙。
    beginElement()觸發(fā)實(shí)例：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="600" height="200">
  <rect x="100" y="100" width="100" height="100">
    <animate attributeName="x" to="400" begin="indefinite" dur="2s">
  </rect>
</svg>
<script type="text/javascript">
  var animate = document.getElementsByTagName("animate")[0];
    if (animate){
      document.getElementById("svg").onclick = function(){
        animate.beginElement();
      }
    }
</script>

超鏈接（a標(biāo)簽）觸發(fā)實(shí)例：

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="200">
    <rect x="100" y="100" width="100" height="100">
        <animate id="animate" attributeName="x" to="400" begin="indefinite" dur="2s"/>
    </rect>
    <a xlink:href="#animate">
        <text x="100" y="60" fill="#cd0000" font-size="30">點(diǎn)擊</text>
    </a>
</svg>

end與begin的屬性大同小異，無需重復(fù)說明反粥。


3.5 dur

dur有兩種值：常規(guī)時(shí)間值 | “indefinite”
常規(guī)時(shí)間值就是（3s）這種正常值卢肃；indefinite指時(shí)間無限。
動畫時(shí)間無限星压，實(shí)際上就是動畫不執(zhí)行践剂，因此設(shè)置“indefinite”跟沒有設(shè)置dur值一個意思，與dur解析異常一個意思娜膘。


3.6 calcMode, keyTimes, keySplines

這幾個參數(shù)是控制動畫節(jié)奏逊脯，先快后慢還是先慢后快。

  • calcMode屬性支持4個值：discrete 竣贪、linear军洼、paced、spline中文意思是：離散演怎，線性匕争、踏步、樣條
  • discrete : from值直接跳轉(zhuǎn)到to的值
  • linear：animateMotion元素以外元素的calcMode默認(rèn)值動畫從頭到尾速率一致爷耀。
  • paced：通過插值讓動畫的變化步調(diào)平穩(wěn)均勻甘桑。僅支持線性數(shù)值區(qū)域內(nèi)的值，這樣點(diǎn)之間“距離”的概念才能被計(jì)算（如position歹叮、width跑杭、height）。如果“paced”被指定咆耿，任何“keyTimes”或“keySplines”的值都將無效德谅。
  • spline插值定義貝塞爾曲線。spline點(diǎn)定義在keyTimes屬性中萨螺，每個時(shí)間間隔控制點(diǎn)由keySplines定義窄做。

  • keyTimes = "<list>"
    跟上面提到的<list>類似，都是分好分隔一組值慰技。keyTimes意思是關(guān)鍵時(shí)間點(diǎn)椭盏。前面提到過values也是多個值，這里有一些約定的規(guī)則：首先keyTimes值得數(shù)目要和values一致惹盼，如果是from庸汗、to、by動畫手报，keyTimes就必須有兩個值蚯舱。
    然后對于linear和spline動畫改化，第一個數(shù)值要是0，最后一個是1枉昏。最后每個連續(xù)的時(shí)間值必須比它前面的值大或者相等陈肛。
    paced模式下，keyTimes會被忽略兄裂；
    keyTimes定義錯誤句旱，也會被忽略；
    dur為indefinite也會被忽略晰奖。

  • keySplines="<list>"
    keySplines表示的是與keyTimes相關(guān)聯(lián)的一組貝塞爾控制點(diǎn)（默認(rèn)0 0 1 1）谈撒。每個控制點(diǎn)使用4個浮點(diǎn)值表示：x1 y1 x2 y2 ,只有模式是 spline 的時(shí)候這個參數(shù)才有用，也是分號分隔匾南，值范圍0~1啃匿，總比keyTimes少一個值。
    如果keySplines值不合法或個數(shù)不對蛆楞，是沒有動畫效果的溯乒。

來看一個綜合實(shí)例：演示效果

<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 80; 160" calcMode="paced"/>
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
    </text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
    <text font-size="60" y="60" x="160">馬
        <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" />
    </text>
</svg>

values確定動畫的關(guān)鍵位置，keyTimes確定到這個關(guān)鍵點(diǎn)需要的時(shí)間豹爹，keySplines確定的是每個時(shí)間之間的貝塞爾曲線裆悄，也就是具體緩動表現(xiàn)。
CSS3寫的transition動畫效果臂聋，也是這么回事光稼，只是values值就兩個，所以孩等，keyTimes只能是0钟哥；1，貝塞爾曲線就一個瞎访，要不ease，要不liner吁恍。
keySplines=".5 0 .5 1; 0 0 1 1"這里的動畫曲線可以自由調(diào)節(jié)扒秸，可以參考以下曲線：


3.7 repeatCount，repeatDur

repeatCount 表示動畫執(zhí)行次數(shù)冀瓦，可以是合法數(shù)值或者"indefinite"(動畫循環(huán)到電腦死機(jī))伴奥。
repeatDur 定義重復(fù)動畫的總時(shí)間∫砻觯可以是普通時(shí)間值或者"indefinite"(動畫循環(huán)到電腦死機(jī))拾徙。

<animate attributeName="x" to="60" dur="3s" repeatCount="indefinite" repeatDur="10s" />

動畫執(zhí)行 3 + 1/3 次。因?yàn)閞epeatDur=“10s”


3.8 fill

fill表示動畫間隙的填充方式感局。支持參數(shù)有：freeze | remove尼啡，其中remove是默認(rèn)值暂衡，表示動畫結(jié)束直接回到開始的地方，freeze表示動畫結(jié)束凍住崖瞭，表示保持動畫結(jié)束的信息狂巢。


3.9 accumulate，additive

accumulate 是累積的意思书聚。支持參數(shù)有none | sum 唧领。默認(rèn)值是none，值sum表示動畫結(jié)束時(shí)的位置作為下次動畫的起始位置雌续。
additive 控制動畫是否附加斩个。支持參數(shù)有：replace | sum。默認(rèn)值replace驯杜，值sum表示動畫的基礎(chǔ)指示會附加到其他低優(yōu)先級的動畫上受啥。
實(shí)例1，

<animateMotion begin="0" dur="5s" path="[some path]" additive="sum" fill="freeze" />
<animateMotion begin="5s" dur="5s" path="[some path]" additive="sum" fill="freeze" />
<animateMotion begin="10s" dur="5s" path="[some path]" additive="sum" fill="freeze" />

輪到第二個動畫的時(shí)候艇肴，路徑從第一個動畫路徑結(jié)束的地方開始腔呜，三個動畫完美結(jié)合

實(shí)例2：在線查看效果

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
   <rect x="200" y="200" width="20" height="20"></rect>
   <animateTransform attributeName="transform" type="scale" from="1" to="4" dur="5s"  additive="sum" fill="freeze"/>
   <animateTransform attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="5s" fill="freeze" additive="sum"/>;
 </svg>


3.10 restart

restart這個屬性誕生的背景如下：很多動畫其觸發(fā)可能與事件相關(guān)，例如再悼，點(diǎn)擊圓圈核畴，矩形就跑。而且冲九，似乎每點(diǎn)一次谤草，矩形就動一下。現(xiàn)在莺奸，存在這種情況丑孩，希望矩形只動一次，之后點(diǎn)擊就不動了灭贷。這種需求迫使restart參數(shù)的出現(xiàn)温学。
支持的參數(shù)有：** always | whenNotActive | never**
always 是默認(rèn)值，表示總是甚疟，也就是點(diǎn)一次圈圈仗岖，馬兒跑一下。
whenNotActive 表示動畫正在執(zhí)行的時(shí)候览妖，不能重啟動畫轧拄。
never 表示執(zhí)行一次就不再執(zhí)行。


3.11 min,max

min/max表示動畫執(zhí)行最短和最長時(shí)間讽膏。支持參數(shù)為時(shí)間值和"media"（沒接元素有效）檩电，max還支持indefinite。


四、動畫暫停與播放

SVG Animation中是有內(nèi)置的API可以暫停和啟動動畫俐末，語法：

//暫停
svg.pauseAnimations();

//播放
svg.unpauseAnimation();

通過ID獲取SVG元素

var svgElement = document.getElementById("rect1")


五料按、animeJS動畫庫

http://animejs.com/
SVG和animeJS搭配使用可以做出非常流暢的動畫。
可以查看我的
實(shí)例1：http://jsbin.com/faxikem/5/edit?html,output
實(shí)例2：https://github.com/PowerXuan/MonstarLogoSVGAnimation

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末鹅搪，一起剝皮案震驚了整個濱河市站绪，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌丽柿，老刑警劉巖恢准，帶你破解...
    沈念sama閱讀 221,695評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異甫题，居然都是意外死亡馁筐，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門坠非，熙熙樓的掌柜王于貴愁眉苦臉地迎上來敏沉，“玉大人，你說我怎么就攤上這事炎码∶顺伲” “怎么了？”我有些...
    開封第一講書人閱讀 168,130評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵潦闲，是天一觀的道長攒菠。 經(jīng)常有香客問我，道長歉闰，這世上最難降的妖魔是什么辖众？ 我笑而不...
    開封第一講書人閱讀 59,648評論 1贊 297
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮和敬，結(jié)果婚禮上凹炸，老公的妹妹穿的比我還像新娘。我一直安慰自己昼弟，他們只是感情好啤它，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著舱痘，像睡著了一般蚕键。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上衰粹，一...
    開封第一講書人閱讀 52,268評論 1贊 309
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音笆怠，去河邊找鬼铝耻。 笑死，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的瓢捉。 我是一名探鬼主播频丘，決...
    沈念sama閱讀 40,835評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼泡态！你這毒婦竟也來了搂漠？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,740評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤某弦，失蹤者是張志新（化名）和其女友劉穎桐汤，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體靶壮，經(jīng)...
    沈念sama閱讀 46,286評論 1贊 318
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡怔毛，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腾降。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拣度。...
    茶點(diǎn)故事閱讀 40,505評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖螃壤，靈堂內(nèi)的尸體忽然破棺而出抗果，到底是詐尸還是另有隱情，我是刑警寧澤奸晴，帶...
    沈念sama閱讀 36,185評論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布冤馏，位于F島的核電站，受9級特大地震影響蚁滋，放射性物質(zhì)發(fā)生泄漏宿接。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一辕录、第九天 我趴在偏房一處隱蔽的房頂上張望睦霎。 院中可真熱鬧，春花似錦走诞、人聲如沸副女。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0贊 24
  • 一樁弒父案蚣旱，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽碑幅。三九已至，卻和暖如春塞绿，著一層夾襖步出監(jiān)牢的瞬間沟涨，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工异吻， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留裹赴，地道東北人喜庞。 一個月前我還...
    沈念sama閱讀 48,921評論 3贊 376
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像棋返，于是被迫代替她去往敵國和親延都。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評論 2贊 359